Ul li Column Count with If Condition in Less Or jQuery

Question

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

是否有可能 jQuery 或更小或 JavaScript ??

提前致谢。

附件：Images1

jsfiddle link : 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>

Ul li Column Count with If Condition in Less Or jQuery

Ul li Column Count with If Condition in Less Or jQuery

html

javascript

css

jquery

less