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

Question

我在 ul li 中使用列计数器。我想要在一个计数器 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>