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

Question

我有一个很长的UL列表,我需要在较小的列表中分解,每个列表包含大约20个项目.

我以为我可以用类似的东西

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

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

Answer 1

我将使用您删除的lis 创建文档片段,然后将它们重新连接到您想要的位置.在这种情况下,我将它们重新添加到身体:

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

现场演示位于:http://jsbin.com/ejigu/33

Answer 2

不幸的是,没有那么简单(我至少知道).试试这个替代方案:

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

毫无疑问,你可以把它变成一个以块大小为参数的函数,但我把它作为读者的练习.