Dev Faq
11
votes

JQuery Split Long UL Liste ultérieure dans les petites listes

J'ai une longue liste UL, j'ai besoin de casser dans des listes plus petites contenant environ 20 articles chacun.

Je pensais que je pourrais utiliser quelque chose comme xxx

mais ce n'est pas le cas. Aucune idée de l'utilisation de jQuery d'une manière qui utilise un processeur minimal?

1 commentaires

Il y a une bibliothèque qui fait ça - github.com/yaireo/listbreaker

10 Réponses :

7
votes

rien de tout aussi simple (que je suis au moins au moins) malheureusement. Essayez ceci comme alternative: 

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

0 commentaires
19
votes

Je créerais des fragments de document avec votre LI code> S, puis les reconstituer à l'emplacement que vous voulez. Dans ce cas, je les réapprouves au corps: 

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

3 commentaires

Juste pour courir, j'ai essayé de faire cela avec regex à la place: Jsbin.com/acupof/2/edit # Javascript, en direct ... Je ne peux pas dire que c'est plus élégant. :)

Pour une vitesse pure, la solution de regex pourrait être meilleure. Si vous avez changé ma réponse à utiliser détacher au lieu de supprimer il conserverait des événements qui ont été attachés aux éléments ou aux sous-éléments. Ce serait utile dans certaines situations. Bien que avec de longues listes, vous devriez probablement déléguer de toute façon déléguer. <3Z

Qu'est-ce que le groupe est défini, avant qu'il ne soit utilisé dans la boucle tandis que?

3
votes

Voici un exemple de travail, changez simplement le MOD 5 au 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 commentaires
0
votes

Voici une autre option - je n'ai profilé aucun de ce qui précède, alors allez avec tout ce qui est le plus rapide. Il suppose que l'UL en question a l'identifiant de #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());

0 commentaires
0
votes

Vous pouvez essayer quelque chose comme ceci: 

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

0 commentaires
2
votes

Fonction: xxx pré>

utilisation: p> xxx pré>

ou: p> 

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

1 commentaires

Si vous le faites récursif, il est encore plus court

1
votes

Celui-ci divise le menu en morceaux d'environ une longueur égale Fonction SplitMenu (menu_id, pièces) {

        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 commentaires
1
votes

Une autre version en tant que plug-in jquery: xxx

0 commentaires
0
votes

Voici une extension du prototype de jQuery ($ .FN) objet pour fournir une nouvelle méthode pouvant être chaînée à la fonction JQuery ().

J'avais besoin de la fonctionnalité où je devrais Ajoutez un élément entre la liste que j'ai divisée. Qui a été ajouté en tant que paramètre facultatif.

Un exemple est disponible à http: // jsfiddle .NET / ROEBURG / 5F2HW /

L'utilisation de la fonction est comme: xxx

La fonction est définie comme suit: < / p> xxx

espérons que cela aide.

0 commentaires
0
votes

Quelque chose comme ceci: xxx

Démo de travail < / strong>

0 commentaires

Articles qui pourrait vous intéresser :

Select2 ne s'affiche pas correctement dans le mode bootstrap
datetimepicker ne fonctionne pas avec bootstrap 4?
L'appel Ajax n'affiche pas de réponse en cas de succès
django admin - Comment ajouter du javascript à la fin d'un fichier