JQuery/jCarousel: Utilisation WrapInner et nième sélecteurs seulement envelopper tous les 8 point

Question

Je veux utiliser jCarousel pour afficher les éléments UL avec LI ne contenant que huit images (deux rangées de quatre), quelque chose qui ressemble à ceci:
<li>
<div>
[image] [image] [image] [image]
[image] [image] [image] [image]
</div>
</li>
<li>
<div>
[image] [image] [image] [image]
[image] [image] [image] [image]
</div>
</li>

Je pensais que une bonne façon de le faire serait d'utiliser after() ajouter quelques balises de fermeture et d'ouverture comme ceci:

$(".jcarousel-item img:nth-child(9)").after(</div></li><li><div>); 

Mais je suppose que je ne comprends pas la nature de after(), car il ne semblera pas insérer de balises de fermeture sauf si elles mènent avec des balises d'ouverture.

Y a-t-il une meilleure façon de le faire avec wrapInner()?

Answer 1

Donc, vous commencez avec un seul ul avec un seul li avec un div contenant un tas d'images & que vous voulez le diviser en un ensemble de li s, contenant chacun 8 images à droite? Si oui, cela fonctionne:

var images = $("img"); 
while (images.length > 8) { 
    images.slice(8, 16).appendTo("ul").wrapAll("<li><div></div></li>"); 
    images = images.slice(16); 
} 

Fondamentalement, il tranche en 8 morceaux d'image de la collection d'images et les ajoute de nouveau dans le ul dans leurs propres li s (il quitte le li d'origine avec les 8 1er images) . Évidemment, vous devrez ajuster vos sélecteurs comme probablement vous avez d'autres images et listes non ordonnées sur votre page.

Modifier: pour expliquer la raison pour laquelle .after ne fonctionne pas la façon dont vous vous attendiez à - je crois que jQuery essaie de manipuler le DOM plutôt que le HTML brut. Vous ne pouvez donc pas simplement ajouter des morceaux aléatoires de HTML à moins qu'ils puissent être analysés et transformés en noeuds DOM réels. En d'autres termes, le contenu que vous transmettez à .after doit en fait être un morceau valide et complet de HTML à part entière. Donc, parce que jQuery ne sait pas comment transformer quelque chose comme "</div></li><li><div>" en un nœud, il agit un peu étrangement (je suppose que dans ce cas, il ignore les deux balises de fermeture initiales, car elles n'ont aucun sens sur leur propre & puis crée les li & div nœuds & puis les ferme automatiquement pour vous).