猿问

jQuery在较小列表中拆分了长长的ul列表

我的UL清单很长，我需要分解成较小的清单，每个清单包含约20个项目。


我以为我可以使用类似


$(function() {

    $("ul li:nth-child(20n)").after("</ul><ul>");

});

但事实并非如此。知道如何以最少的CPU使用jQuery吗？


摇曳的蔷薇
浏览 502回答 3
3回答

红糖糍粑

不幸的是，没有那么简单（至少我知道）。尝试以下方法：$(function() {&nbsp; $("ul").each(function() {&nbsp; &nbsp; var list = $(this);&nbsp; &nbsp; var size = 3;&nbsp; &nbsp; var current_size = 0;&nbsp; &nbsp; list.children().each(function() {&nbsp; &nbsp; console.log(current_size + ": " + $(this).text());&nbsp; &nbsp; &nbsp; if (++current_size > size) {&nbsp; &nbsp; &nbsp; &nbsp; var new_list = $("<ul></ul>").insertAfter(list);&nbsp; &nbsp; &nbsp; &nbsp; list = new_list;&nbsp; &nbsp; &nbsp; &nbsp; current_size = 1;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; list.append(this);&nbsp; &nbsp; });&nbsp; });});毫无疑问，您可以将其转换为以块大小作为参数的函数，但我将其作为练习留给读者。
0

慕的地8271018

这是一个工作示例，只需将mod 5更改为mod 20。<html><script type="text/javascript" src="jquery-1.3.2.js"></script><script type="text/javascript">function onLoad(){&nbsp; &nbsp;var itemindex = 0;&nbsp; &nbsp;var Jlistobj = null;&nbsp; &nbsp;$('#list li').each(function()&nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; if (itemindex % 5 == 0)&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Jlistobj = $("<ul></ul>");&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; Jlistobj.append($(this));&nbsp; &nbsp; &nbsp; $('#out_div').append(Jlistobj);&nbsp; &nbsp; &nbsp; itemindex++;&nbsp; &nbsp;});}</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
随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

Html/CSS
为什么字体颜色在Eclipse上没有变化 2 回答
JQuery
我要回答