在Less or jQuery中具有if条件的Ul li列数

Question

我正在使用ul中的列计数器。我想在一个柜台li中使用15个数字，然后在每个柜台组中我想要15-15 li。我也分享了我实际需要的图片。

是否可以在jQuery或Less或JavaScript中使用？

预先感谢。

附件：Images1

jsfiddle链接：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;
}
.counter-list li{
  line-height: 1.5em;
  counter-increment: step-counter;
}

<ul class="counter-list">
  <li>list Item 1</li>
  <li>list Item 2</li>
  <li>list Item 3</li>
  <li>list Item 4</li>
  <li>list Item 5</li>
  <li>list Item 6</li>
  <li>list Item 7</li>
  <li>list Item 8</li>
  <li>list Item 9</li>
  <li>list Item 10</li>
  <li>list Item 11</li>
  <li>list Item 12</li>
  <li>list Item 13</li>
  <li>list Item 14</li>
  <li>list Item 15</li>
  <li>list Item 16</li>
  <li>list Item 17</li>
  <li>list Item 18</li>
  <li>list Item 19</li>
  <li>list Item 20</li>
  <li>list Item 21</li>
  <li>list Item 22</li>
  <li>list Item 23</li>
  <li>list Item 24</li>
  <li>list Item 25</li>
  <li>list Item 26</li>
  <li>list Item 27</li>
  <li>list Item 28</li>
  <li>list Item 29</li>
  <li>list Item 30</li>
  <li>list Item 31</li>

</ul>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>