11

ULリストが長いので、それぞれ約20個のアイテムを含む小さなリストに分割する必要があります。

私は私が次のようなものを使うことができると思っていました

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

しかし、そうではありません。最小限のCPUを使用する方法でjQueryを使用する方法はありますか？

4

10 に答える 10

19

削除したsを使用してドキュメントフラグメントを作成liし、必要な場所に再追加します。この場合、私はそれらを体に再追加しました：

$(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-29T16:12:40.457 に答える
7

残念ながら、これほど単純なものはありません（少なくとも私は知っています）。別の方法としてこれを試してください。

$(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-29T16:05:07.267 に答える
3

これが実際の例です。mod5をmod20に変更するだけです。

<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-29T16:23:59.920 に答える
2

働き：

$.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-23T19:15:16.610 に答える
1

これは、メニューをほぼ等しい長さの関数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);
于 2012-08-03T12:34:25.063 に答える
1

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-05T11:12:53.273 に答える
0

別のオプションがあります-私は上記のいずれもプロファイルしていないので、もちろん最も速いものを選択してください。問題のulのIDが#listであると想定しています。

     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-29T16:53:48.440 に答える
0

あなたはこのようなことを試すことができます：

$("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：作成される新しいリストの数を事前に見つけ、それらのリストを作成し、最大20 liのブロックを新しく作成されたリストに移動して、一度だけ移動するようにすることで、さらに洗練できると思います。

于 2009-10-29T17:19:25.800 に答える
0

これは、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-09T08:24:46.037 に答える
0

このようなもの：

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

作業デモ

于 2015-06-16T07:31:00.007 に答える