jQuery ha diviso la lista dei long ul in elenchi più piccoli

Ho una lunga lista di UL che ho bisogno di suddividere in elenchi più piccoli contenenti circa 20 articoli ciascuno.

Stavo pensando che potrei usare qualcosa del genere

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

ma non è questo il caso. Qualche idea su come usare jQuery in un modo che usi una CPU minima?

Vorrei creare frammenti di documenti con i tuoi rimossi e quindi riappropriarli nella posizione che desideri. In questo caso, li ho riapprovati al corpo:

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

    Live Demo è disponibile all’indirizzo: http://jsbin.com/ejigu/33

    Niente di così semplice (che ne sono a conoscenza almeno) sfortunatamente. Prova questo come alternativa:

     $(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 = $("
      ").insertAfter(list); list = new_list; current_size = 1; } list.append(this); }); }); });

      Potresti senza dubbio trasformare questo in una funzione che considera la dimensione del blocco come argomento, ma la lascio come un esercizio per il lettore.

      Ecco un esempio funzionante, basta cambiare il mod 5 a mod 20.

           
      • item1
      • item2
      • item3
      • item4
      • item5
      • item6
      • item7
      • item8
      • item9
      • item10
      • item11
      • item12
      • item13
      • item14
      • item15
      • item16
      • item17
      • item18
      • item19
      • item20

      funzione:

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

      utilizzo:

       $('ul#slides').splitUp(4,'<li class=splitUp><ul>') 

      o:

       $('div#slides').splitUp(3,'<div/>') 

      questo divide il menu in parti di funzione di lunghezza approssimativamente splitMenu (menu_id, pezzi) {

        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){ $('
        ').attr('class',$($menu).attr('class')).append(group).appendTo($($menu).parent()); } $($menu).remove(); } splitMenu('#menu-footermenu', 2);

        Solo un’altra versione come plugin jQuery:

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

          Ecco un’altra opzione: non ho profilato nessuno dei precedenti, quindi vai con quello che è più veloce, naturalmente. Suppone che l’ul in questione abbia l’id di #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#list").replaceWith($("ul#list").children());

            puoi provare qualcosa del genere:

             $("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 = $("
              "); $(list).after(new_list); new_list.append($(list).find("li:gt(20)")); if(new_list.find("li").length > 20){ split_list(new_list); } } }

              LE: Penso che possa essere ulteriormente perfezionato, trovando in anticipo quanti nuovi elenchi saranno creati, creando quelle liste e spostando blocchi di ~ 20 li nelle nuove liste create in modo che vengano spostate una sola volta.

              Ecco un’estensione dell’object jQuery prototype ($ .fn) per fornire un nuovo metodo che può essere incatenato alla funzione jQuery ().

              Avevo bisogno di funzionalità in cui dovevo aggiungere un elemento tra la lista che ho diviso. Questo è stato aggiunto come parametro opzionale.

              Un esempio è disponibile su http://jsfiddle.net/roeburg/5F2hW/

              L’uso della funzione è così:

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

              La funzione è definita come segue:

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

              Spero che questo ti aiuti.

              Qualcosa come questo:

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

              Demo di lavoro