JQuery/JCarousel: Использование WrapInner и степени п селекторы только обернуть каждый 8-й предмета

Question

Я хочу использовать JCarousel для отображения UL элементы с LI, содержащие только восемь изображений (две строки из четырех), что-то, что выглядит следующим образом:
<li>
<div>
[изображение] [изображение] [изображение] [изображение]
[изображение] [изображение] [изображение] [изображение]
</div>
</li>
<li>
<div>
[изображение] [изображение] [изображение] [изображение]
[изображение] [изображение] [изображение] [изображение]
</div>
</li>

Я думал, что хороший способ сделать это было бы использовать after(), чтобы добавить некоторые закрытия и открытия теги, как так:

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

Но я думаю, что я не понимаю природу after(), потому что он не будет вставлять закрывающие теги, если они не ведут с открытыми тегами.

Есть ли лучший способ сделать это с помощью wrapInner()?

Answer 1

Итак, вы начинаете с одной ul с одной li с div, содержащим целую кучу изображений & вы хотите, чтобы разделить его на множество li с, каждый из которых содержит 8 изображений вправо? Если да, то это будет работать:

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

В основном это отрезает 8 кусков изображений из коллекции изображений и добавляет их обратно в ul в своих li с (она оставляет оригинальную li с 1-го 8 изображений) , Очевидно, что вам нужно будет настроить селектора, поскольку у вас есть другие изображения и неупорядоченные списки на вашей странице.

Edit: объяснить причину, почему .after не работает так, как вы ожидали его - Я считаю, что JQuery пытается манипулировать DOM, а не сырой HTML. Таким образом, вы не можете просто добавлять произвольные фрагменты HTML, если они не могут быть проанализированы и превращены в фактические узлы DOM. Другими словами, контент, который вы переходите на .after, фактически должен быть правильным и полным фрагментом HTML в своем собственном праве. Итак, поскольку jQuery не может решить, как превратить что-то вроде «</div></li><li><div>» в узел, он действует немного странно (я предполагаю, что в этом случае он игнорирует два начальных тега закрытия, поскольку они не имеют смысла в их собственные &, то создайте li & div узлы &, тогда они автоматически автоматически закрывают их для вас).