jQuery在較小的列表中分割長的ul列表

我有一個很長的UL列表，我需要在包含大約20個項目的小列表中分解。jQuery在較小的列表中分割長的ul列表

我想我可以使用類似

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

但事實並非如此。任何想法如何以最小的CPU使用jQuery？

來源

2009-10-29 Lezz

有這確實是一個圖書館 - https://github.com/yairEO/listBreaker – vsync 2016-10-21 14:22:06

我會用刪除的li創建文檔片段，然後將它們重新安裝到您想要的位置。在這種情況下，我reappended他們的身體：

$(function(){ 
    var $bigList = $('#bigList'), group; 
    while((group = $bigList.find('li:lt(20)').remove()).length){ 
    $('<ul/>').append(group).appendTo('body'); 
    } 
});

現場演示是：http://jsbin.com/ejigu/33

來源

2009-10-29 16:12:40

只是爲了來看，我試着用正則表達式這樣做相反：http://jsbin.com/acupof/2/edit#javascript,live ...我不能說它更優雅。 :) – 2011-10-12 00:26:34

對於純粹的速度，正則表達式解決方案可能會更好。如果您將我的答案切換爲使用'detach'而不是'remove'，它將保留已附加到元素或子元素的所有事件。這在某些情況下會有幫助。儘管列表很長，但你可能應該委託代理。 <3z – 2011-10-12 06:01:33

誰是壞人？保羅愛爾蘭人，這是誰:) ........很好地完成！ – Oneezy 2014-03-28 22:17:26

沒有那麼簡單（至少我知道）。試試這個作爲一種替代方案：

$(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); 
    }); 
    }); 
});

你可以毫無疑問，這變成是需要的塊大小爲自變量的函數，但我將它作爲一個練習留給讀者。

來源

2009-10-29 16:05:07 cletus

這裏有一個工作的例子，只是國防部5變更爲國防部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>

來源

2009-10-29 16:23:59 Snazzer

這裏是另一種選擇 - 我沒有分析上述任何內容，所以請隨時以最快速度進行。它假定有問題的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());

來源

2009-10-29 16:53:48 ScottE

你可以嘗試這樣的事：

$("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：我覺得可以通過尋找前場的許多新的名單怎麼會createt進一步細化，創建這些列表和移動的塊〜 20立方米進入新創建的列表，所以他們只會被移動一次。

來源

2009-10-29 17:19:25 jikhan

功能：

$.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,'&lt;li class=splitUp&gt;&lt;ul&gt;')

或：

$('div#slides').splitUp(3,'&lt;div/&gt;')

來源

2010-03-23 19:15:16

如果你使它遞歸，它甚至更短 – 2012-11-21 14:12:39

這一拆分菜單中的近似相等的長度功能splitMenu（menu_id，件件）{

 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);

來源

2012-08-03 12:34:25

只是另一個版本的jQuery插件：

jQuery.fn.splitList = function(num) { 
    var sublist; 
    while((sublist = this.find('li:gt('+(num-1)+')').remove()).length){ 
    this.after($('<ul/>').append(sublist)); 
    } 
};

來源

2013-06-05 11:12:53

這裏是jQuery的原型（.fn $）對象的擴展，提供可鏈接到jQuery的（）函數的新方法。

我需要的功能，我需要添加一個元素之間我分裂的列表。這已添加爲可選參數。

一個例子是可在http://jsfiddle.net/roeburg/5F2hW/

功能的使用是像這樣：

$("ul").customSplitList(5);

該函數定義如下：

// 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);

希望這有助於。

來源

2014-07-09 08:24:46

事情是這樣的：

var lis = $("ul > li"); 
for(var i = 0; i < lis.length; i+=20) { 
    lis.slice(i, i+20).wrapAll("<ul></li>"); 
} 
$("ul > ul").unwrap();

Working Demo

來源

2015-06-16 07:31:00

jQuery在較小的列表中分割長的ul列表

回答

相關問題