我的UL清單很長，我需要分解成較小的清單，每個清單包含約20個項目。我以為我可以使用類似$(function() { $("ul li:nth-child(20n)").after("</ul><ul>");});但事實并非如此。知道如何以最少的CPU使用jQuery嗎？
3 回答
紅糖糍粑
TA貢獻(xiàn)1815條經(jīng)驗 獲得超6個贊
不幸的是，沒有那么簡單（至少我知道）。嘗試以下方法：
$(function() {
$("ul").each(function() {
var list = $(this);
var size = 3;
var current_size = 0;
list.children().each(function() {
console.log(current_size + ": " + $(this).text());
if (++current_size > size) {
var new_list = $("<ul></ul>").insertAfter(list);
list = new_list;
current_size = 1;
}
list.append(this);
});
});
});
毫無疑問，您可以將其轉(zhuǎn)換為以塊大小作為參數(shù)的函數(shù)，但我將其作為練習(xí)留給讀者。
慕的地8271018
TA貢獻(xiàn)1796條經(jīng)驗 獲得超4個贊
這是一個工作示例，只需將mod 5更改為mod 20。
<html>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
function onLoad(){
var itemindex = 0;
var Jlistobj = null;
$('#list li').each(function()
{
if (itemindex % 5 == 0)
{
Jlistobj = $("<ul></ul>");
}
Jlistobj.append($(this));
$('#out_div').append(Jlistobj);
itemindex++;
});
}
</script>
<body onLoad="onLoad()">
<ul id="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
<li>item13</li>
<li>item14</li>
<li>item15</li>
<li>item16</li>
<li>item17</li>
<li>item18</li>
<li>item19</li>
<li>item20</li>
</ul>
<div id="out_div"></div>
</body>
</html>
添加回答
舉報
0/150
提交
取消