JQuery / JCarousel: использование WrapInner и nth селекторов, чтобы обернуть только каждый 8-й элемент - PullRequest
Новая
       12

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

1 голос
/ 31 июля 2009

Я хочу использовать 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()?

1 Ответ

1 голос
/ 31 июля 2009

Итак, вы начинаете с одного 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 с первыми 8 изображениями). Очевидно, вам нужно настроить селекторы, так как, вероятно, у вас есть другие изображения и неупорядоченные списки на вашей странице.

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

...