jQuery split long ul list in smaller lists

2019-01-03 10:32发布

站内问答 / jQuery
382 10 4

I have a long UL list I need to break up in smaller lists containing about 20 items each.

I was thinking I could use something like

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

but that's not the case. Any idea how to use jQuery in a way that uses minimal CPU?

10条回答
地球回转人心会变
2楼-- · 2019-01-03 10:58

Here's a working example, just change the mod 5 to 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>
查看更多
0人赞 添加讨论(0) 举报
我欲成王，谁敢阻挡
3楼-- · 2019-01-03 10:58

you can try something like this:

$("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: I think it can be further refined by finding up front how many new list will be createt, create those lists and move blocks of ~20 li's into the new created lists so they will be moved only once.

查看更多
0人赞 添加讨论(0) 举报
戒情不戒烟
4楼-- · 2019-01-03 10:59

Just another version as a jQuery plugin:

jQuery.fn.splitList = function(num) {
  var sublist;
  while((sublist = this.find('li:gt('+(num-1)+')').remove()).length){
    this.after($('<ul/>').append(sublist));
  }
};
查看更多
0人赞 添加讨论(0) 举报
我欲成王，谁敢阻挡
5楼-- · 2019-01-03 11:01

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

usage:

$('ul#slides').splitUp(4,'&lt;li class=splitUp&gt;&lt;ul&gt;')

or:

$('div#slides').splitUp(3,'&lt;div/&gt;')
查看更多
0人赞 添加讨论(0) 举报
我只想做你的唯一
6楼-- · 2019-01-03 11:03

I would create document fragments with your removed lis and then reappend them to the location you want them. In this case, I reappended them to the body:

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

Live Demo is at: http://jsbin.com/ejigu/33

查看更多
0人赞 添加讨论(0) 举报
我只想做你的唯一
7楼-- · 2019-01-03 11:03

this one splits the menu in to pieces of approximately equal length function 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);
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)