En utilisant Jquery pour envelopper le contenu dynamique avec les balises HTML

Question

J'ai une page qui retourne une liste dynamique des articles

<ul> 
<li>item1</li> 
<li>item2</li> 
<li>item3</li> 
<li>item4</li> 
<li>item5</li> 
<li>item6</li> 
</ul> 

je besoin d'un moyen d'insérer des balises autour de chaque groupe de 3 éléments de la liste. Fondamentalement, le code transformerai ci-dessus dans ce

<ul> 
<div> 
    <li>item1</li> 
    <li>item2</li> 
    <li>item3</li> 
</div> 
<div> 
    <li>item4</li> 
    <li>item5</li> 
    <li>item6</li> 
</div> 
</ul> 

Je joue autour avec le Jquery Wrap(), WrapAll(), WrapInner() ... mais sans succès jusqu'à présent. Apprécier grandement des solutions ou des idées à ce sujet.

Answer 1

Voilà une autre méthode qui génère le code HTML dynamique et suit sémantique correcte permettant seulement <li> éléments directement à l'intérieur des éléments: <ul>.

$(function(){ 
    const GROUP_COUNT = 3; 
    var liElements = $('ul > li'); 
    var count = liElements.length; 
    var html = ''; 

    for (var i = 0; i < count; i += GROUP_COUNT) { 
     html += '<li><ul>'; 
     liElements.slice(i, i + GROUP_COUNT).each(function(){ 
      html += '<li>' + $(this).html() + '</li>'; 
     }); 
     html += '</ul></li>'; 
    } 

    $('ul').html(html); 
}); 

Vous pouvez modifier GROUP_COUNT pour regrouper par un nombre différent d'éléments.

Ce code transformera:

<ul> 
    <li>item1</li> 
    <li>item2</li> 
    <li>item3</li> 
    <li>item4</li> 
    <li>item5</li> 
    <li>item6</li> 
    <li>item7</li> 
</ul> 

en:

<ul> 
    <li> 
    <ul> 
     <li>item1</li> 
     <li>item2</li> 
     <li>item3</li> 
    </ul> 
    </li> 
    <li> 
    <ul> 
     <li>item4</li> 
     <li>item5</li> 
     <li>item6</li> 
    </ul> 
    </li> 
    <li> 
    <ul> 
     <li>item7</li> 
    </ul> 
    </li> 
</ul> 

Answer 2

Cette solution est pour les commentaires suggérés dans les commentaires pour insérer new ul au lieu de div.

jQuery:

var numbGroups = ($('ul li').length - 3)/3; 
for(var index = 0; index < numbGroups ; index++) { 
$('#ul'+index).after("<ul id='ul"+(index+1)+"'></ul>"); 
$('#ul' + (index+1)).append($('ul#ul0 li:gt(2):lt(3)')); 
} 

Insérer un Id dans la ul

<ul id='ul0'> 
<li>item1</li> 
<li>item2</li> 
<li>item3</li> 
<li>item4</li> 
<li>item5</li> 
<li>item6</li> 
<li>item7</li> 
<li>item8</li> 
</ul> 

EDIT: L'ancienne solution était mal pour des listes plus longues. Corrigé cela.

Answer 3

Que diriez-vous ceci:.

var originalList = $("ul"); 
var listsToAdd = originalList.children("li").length/3 - 1; 
for(var index = 0; index < listsToAdd; index++) 
{ 
    originalList.before("<ul></ul>"); 
} 
while (originalList.children("li").length > 3) 
{ 
    originalList.children("li:lt(3)").appendTo("ul:empty:first"); 
} 

Il a travaillé dans mes tests avec des listes plus grandes et ne identifiant doit être ajouté (en supposant qu'il n'y a qu'une seule liste pour commencer Sinon, mettre originalList à la liste à divisé)

Answer 4

je, comme suggéré précédemment, le conseil de ne pas inclure certains éléments div intérieur ul. En tout cas, voici ma proposition pour cela:

for(var i = 2; i < $('ul li').length - 1; i += 3) 
{ $('ul li').eq(i).after('</div><div>'); } 
$('ul').wrapInner('<div></div>');