Ul li 在 Less 或 jQuery 中使用 If 条件进行列计数

Question

我在 ul li 中使用列计数器。我想要在一个计数器 li 中包含 15 个数字，然后我想要在每个计数器组中包含 15-15 li。我还分享了我实际需要的图片。在 jQuery 或 Less 或 JavaScript 中可能吗？提前致谢。附件：图片1jsfiddle 链接：link1.counter-list{  list-style:none;  padding:0px;  column-count: 2;}.counter-list li {     }<ul class="counter-list"><li>list 1</li><li>list 2</li><li>list 3</li><li>list 4</li><li>list 5</li><li>list 6</li><li>list 7</li><li>list 8</li><li>list 9</li><li>list 10</li><li> list 11</li><li>list 12</li><li>list 13</li><li>list 14</li><li>list 15</li><li>list 16</li><li>list 17</li><li>list 18</li><li>list 19</li><li>list 20</li><li> list 21</li><li>list 22</li><li>list 23</li><li>list 24</li><li>list 25</li><li>list 26</li><li>list 27</li><li>list 28</li><li>list 29</li><li>list 30</li><li>list 31</li></ul>

Answer 1

我更改了您的 CSS 以显示 15 个项目。请参见下面的示例。

.counter-list {

  list-style: none;

  padding: 0px;

  display: grid;

  grid-auto-flow: column;

  grid-template-rows: repeat(15, 1fr);

}

.counter-list li {}

<ul class="counter-list">

  <li>list 1</li>

  <li>list 2</li>

  <li>list 3</li>

  <li>list 4</li>

  <li>list 5</li>

  <li>list 6</li>

  <li>list 7</li>

  <li>list 8</li>

  <li>list 9</li>

  <li>list 10</li>

  <li> list 11</li>

  <li>list 12</li>

  <li>list 13</li>

  <li>list 14</li>

  <li>list 15</li>

  <li>list 16</li>

  <li>list 17</li>

  <li>list 18</li>

  <li>list 19</li>

  <li>list 20</li>

  <li> list 21</li>

  <li>list 22</li>

  <li>list 23</li>

  <li>list 24</li>

  <li>list 25</li>

  <li>list 26</li>

  <li>list 27</li>

  <li>list 28</li>

  <li>list 29</li>

  <li>list 30</li>

  <li>list 31</li>

</ul>

Answer 2

尝试下面的代码：（只需更改 min_items_per_col ）

$(function($) {

    var num_cols = 0,

    container = $('.counter-list'),

    listItem = 'li',

    listClass = 'sub-list';

    container.each(function() {

        var items_per_col = new Array(),

        items = $(this).find(listItem),

        min_items_per_col = 15,//Math.floor(items.length / num_cols),

        num_cols = Math.ceil((items.length) / min_items_per_col),

        difference = items.length - (min_items_per_col * num_cols);

        for (var i = 0; i < num_cols; i++) {

            if (i < difference) {

                items_per_col[i] = min_items_per_col + 1;

            } else {

                items_per_col[i] = min_items_per_col;

            }

        }

        for (var i = 0; i < num_cols; i++) {

            $(this).append($('<ul ></ul>').addClass(listClass));

            for (var j = 0; j < items_per_col[i]; j++) {

                var pointer = 0;

                for (var k = 0; k < i; k++) {

                    pointer += items_per_col[k];

                }

                $(this).find('.' + listClass).last().append(items[j + pointer]);

            }

        }

    });

});

.counter-list ul{

  float: left;

  list-style:none;

  border-bottom: 1px solid;

}

.counter-list li{

  line-height: 1.5em;

  counter-increment: step-counter;

 }

.counter-list li:before {

    content: counter(step-counter);

  margin-right: 5px;

  font-size: 80%;

  background-color: rgb(0,200,200);

  color: white;

  font-weight: bold;

  padding: 3px 8px;

  border-radius: 3px;

 }

<ul class="counter-list">

  <li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li><li>List</li>

</ul>

<script

  src="https://code.jquery.com/jquery-3.4.1.min.js"

  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="

  crossorigin="anonymous"></script>