我在 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>
2 回答
人到中年有點甜
TA貢獻1895條經驗 獲得超7個贊
我更改了您的 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>
縹緲止盈
TA貢獻2041條經驗 獲得超4個贊
嘗試下面的代碼：（只需更改 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>
- 2 回答
- 0 關注
- 115 瀏覽
添加回答
舉報
0/150
提交
取消