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

Question

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

在 jQuery 或 Less 或 JavaScript 中可能吗？

提前致谢。

附件：图片1

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 {&nbsp; list-style: none;&nbsp; padding: 0px;&nbsp; display: grid;&nbsp; grid-auto-flow: column;&nbsp; grid-template-rows: repeat(15, 1fr);}.counter-list li {}<ul class="counter-list">&nbsp; <li>list 1</li>&nbsp; <li>list 2</li>&nbsp; <li>list 3</li>&nbsp; <li>list 4</li>&nbsp; <li>list 5</li>&nbsp; <li>list 6</li>&nbsp; <li>list 7</li>&nbsp; <li>list 8</li>&nbsp; <li>list 9</li>&nbsp; <li>list 10</li>&nbsp; <li> list 11</li>&nbsp; <li>list 12</li>&nbsp; <li>list 13</li>&nbsp; <li>list 14</li>&nbsp; <li>list 15</li>&nbsp; <li>list 16</li>&nbsp; <li>list 17</li>&nbsp; <li>list 18</li>&nbsp; <li>list 19</li>&nbsp; <li>list 20</li>&nbsp; <li> list 21</li>&nbsp; <li>list 22</li>&nbsp; <li>list 23</li>&nbsp; <li>list 24</li>&nbsp; <li>list 25</li>&nbsp; <li>list 26</li>&nbsp; <li>list 27</li>&nbsp; <li>list 28</li>&nbsp; <li>list 29</li>&nbsp; <li>list 30</li>&nbsp; <li>list 31</li></ul>

Answer 2

尝试下面的代码：（只需更改 min_items_per_col ）$(function($) {&nbsp; &nbsp; var num_cols = 0,&nbsp; &nbsp; container = $('.counter-list'),&nbsp; &nbsp; listItem = 'li',&nbsp; &nbsp; listClass = 'sub-list';&nbsp; &nbsp; container.each(function() {&nbsp; &nbsp; &nbsp; &nbsp; var items_per_col = new Array(),&nbsp; &nbsp; &nbsp; &nbsp; items = $(this).find(listItem),&nbsp; &nbsp; &nbsp; &nbsp; min_items_per_col = 15,//Math.floor(items.length / num_cols),&nbsp; &nbsp; &nbsp; &nbsp; num_cols = Math.ceil((items.length) / min_items_per_col),&nbsp; &nbsp; &nbsp; &nbsp; difference = items.length - (min_items_per_col * num_cols);&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < num_cols; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (i < difference) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items_per_col[i] = min_items_per_col + 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items_per_col[i] = min_items_per_col;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < num_cols; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).append($('<ul ></ul>').addClass(listClass));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var j = 0; j < items_per_col[i]; j++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var pointer = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var k = 0; k < i; k++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pointer += items_per_col[k];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).find('.' + listClass).last().append(items[j + pointer]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});.counter-list ul{&nbsp; float: left;&nbsp; list-style:none;&nbsp; border-bottom: 1px solid;}.counter-list li{&nbsp; line-height: 1.5em;&nbsp; counter-increment: step-counter;&nbsp;}.counter-list li:before {&nbsp; &nbsp; content: counter(step-counter);&nbsp; margin-right: 5px;&nbsp; font-size: 80%;&nbsp; background-color: rgb(0,200,200);&nbsp; color: white;&nbsp; font-weight: bold;&nbsp; padding: 3px 8px;&nbsp; border-radius: 3px;&nbsp;}<ul class="counter-list">&nbsp; <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&nbsp; src="https://code.jquery.com/jquery-3.4.1.min.js"&nbsp; integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="&nbsp; crossorigin="anonymous"></script>