jQuery将较长的ul列表分割成较小的列表
我有一个很长的UL列表，我需要把它们分成两大小小的列表，每列大约有20个项目。
我在想我可以使用类似的东西
$(function() { $("ul li:nth-child(20n)").after("</ul><ul>"); }); 但事实并非如此。 任何想法如何使用jQuery的方式，使用最小的CPU？
我会创build文件碎片与您删除li ，然后重新安装到您想要他们的位置。 在这种情况下，我把它们重新join了身体：
$(function(){ var $bigList = $('#bigList'), group; while((group = $bigList.find('li:lt(20)').remove()).length){ $('<ul/>').append(group).appendTo('body'); } });
现场演示在： http : //jsbin.com/ejigu/33
没有那么简单（至less我知道），不幸的是。 试试这个作为替代：
$(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); }); }); });
你毫无疑问可以把它变成一个以块大小为参数的函数，但是我把它作为读者的一个练习。
这里有一个工作的例子，只需将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>
function：
$.fn.splitUp=function(splitBy,wrapper) { $all= $(this).find('>*'); var fragment=Math.ceil($all.length/splitBy); for(i=0; i< fragment; i++) $all.slice(splitBy*i,splitBy*(i+1)).wrapAll(wrapper); return $(this); }
用法：
$('ul#slides').splitUp(4,'<li class=splitUp><ul>')
要么：
$('div#slides').splitUp(3,'<div/>')
这个菜单分割成大约等长的函数splitMenu（menu_id，pieces）{
var $menu = $(menu_id), group; var splitItem = 0, totItemLen = 0, cumlen = 0; $($menu).find('li').each(function(){ totItemLen = totItemLen + $(this).width(); }); $($menu).find('li').each(function(i){ cumlen = cumlen + $(this).width(); if ( totItemLen/pieces < cumlen && splitItem == 0) splitItem = i; }); while((group = $($menu).find('li:lt(' + splitItem + ')').remove()).length){ $('<ul/>').attr('class',$($menu).attr('class')).append(group).appendTo($($menu).parent()); } $($menu).remove(); } splitMenu('#menu-footermenu', 2);
只是作为一个jQuery插件的另一个版本：
jQuery.fn.splitList = function(num) { var sublist; while((sublist = this.find('li:gt('+(num-1)+')').remove()).length){ this.after($('<ul/>').append(sublist)); } };
这是另一个select – 我没有描述上述任何一个，所以当然要用最快的方法。 它假定有问题的ul有#list的id。
var listItemsPerList = 10; var listItems = $("ul > li").length; for (var i = 0; i < Math.round(listItems / listItemsPerList); i++) { var startingItem = i * listItemsPerList; var endingItem = (i + 1) * listItemsPerList; if (endingItem > listItems) { endingItem = listItems }; $("ul > li").slice(startingItem, endingItem).wrapAll("<ul></ul>"); } $("ul#list").replaceWith($("ul#list").children());
你可以尝试这样的事情：
$("ul").each(function(k,v)){ split_list(v); } function split_list(list){ var li_num = $(list).find("li").length; if(li_num > 20){ var new_list = $("<ul></ul>"); $(list).after(new_list); new_list.append($(list).find("li:gt(20)")); if(new_list.find("li").length > 20){ split_list(new_list); } } }
LE：我认为可以通过查找前面多less个新列表来创build列表并将〜20列的块移动到新创build的列表中，以便它们仅被移动一次。
这是jQuery原型（$ .fn）对象的扩展，提供了一个可以链接到jQuery（）函数的新方法。
我需要function，我需要在我分裂的列表之间添加一个元素。 这已被添加为可选参数。
一个例子可以在http://jsfiddle.net/roeburg/5F2hW/获得;
该函数的用法如下所示：
$("ul").customSplitList(5);
该function定义如下：
// Function definition (function ($) { // Function is defined here ... $.fn.customSplitList = function (indexToSplit, elementToAddInBetween) { // Holds a reference to the element(list) var that = this; var subList, newList, listLength; // Only continue if the element is a derivitive of a list if ($(that) && ($(that).is("ul") || $(that).is("ol"))) { // Additionally check if the length & the split index is valid listLength = $(that).children().length; if ($.isNumeric(indexToSplit) && indexToSplit > 0 && indexToSplit < listLength) { // Based on list type, create a new empty list newList = $($(that).clone(true)).empty(); while ((subList = this.find('li:gt(' + (indexToSplit - 1) + ')').remove()).length) { newList.append(subList); } if (elementToAddInBetween && $(elementToAddInBetween)) { that.after(newList); newList.before(elementToAddInBetween); } else { that.after(newList); } } } }; })(jQuery);
希望这可以帮助。
像这样的东西：
var lis = $("ul > li"); for(var i = 0; i < lis.length; i+=20) { lis.slice(i, i+20).wrapAll("<ul></li>"); } $("ul > ul").unwrap();
工作演示
