jQuery在较小列表中拆分了长长的ul列表
我的UL清单很长，我需要分解成较小的清单，每个清单包含约20个项目。
我以为我可以使用类似
$(function() {
$("ul li:nth-child(20n)").after("</ul><ul>");
});
但事实并非如此。知道如何以最少的CPU使用jQuery吗？
摇曳的蔷薇浏览 502回答 3
3回答
-
红糖糍粑
不幸的是，没有那么简单（至少我知道）。尝试以下方法：$(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); }); });});毫无疑问，您可以将其转换为以块大小作为参数的函数，但我将其作为练习留给读者。 -
慕的地8271018
这是一个工作示例，只需将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>
随时随地看视频慕课网APP
Html/CSS
JQuery