Jquery .after () не вставляется как ожидалось

Question

РЕДАКТИРОВАТЬ: Решение найдено Как обернуть каждые 3 дочерних div с html, используя jquery?

---

Я печатаю список с большим количеством<div> и хотите вставлять </div><div class="clearfix"> после каждого 6-го <div> с помощью jQuery.

Естественно, это будет что-то вроде

$('#staffscroll .person:nth-child(5n)').after('</div><div class="clearfix">');

Но на выходе получается <div class="clearfix"></div>что просто не имеет смысла.

Есть какие-нибудь мысли?

---

Хорошо, возможно, следует предоставить еще немного кода ..

I 'Я работаю со слайд-шоу.Весь смысл в том, чтобы поместить вещи в <div>.

Например ..

<div id="slideshow">
    <div class="clearfix"> First slide wrapper
        <img>
        <img>
        <img>
        <img>
    </div>
    <div class="clearfix"> Second slide wrapper
        <img>
        <img>
        <img>
        <img>
    </div>
    <div class="clearfix"> Third slide wrapper
        <img>
        <img>
    </div>
</div>

Проблема в том, что я работаю с CMS, а это не имеетполучил так много контроля над динамическим выводом.Поэтому я подумал, что я мог бы просто вывести весь контент, а затем предоставить обертки для слайдов.

Поэтому </div><div class="clearfix">

У меня не было подсказки, если он сделает большеили нет смысла сейчас, но я надеюсь, вы понимаете, что я пытаюсь сделать.

Answer 1

Оператор, который вы пытаетесь вставить, не является правильным XML.Вы думаете о своем HTML-документе как о большой строке, но это неправильный способ, если вы хотите использовать такие инструменты, как jQuery.

Я предлагаю вам узнать больше о DOM икак это использовать.Весь ваш подход неверен, поэтому ваш пример кода не поддается исправлению.

Answer 2

IIRC, jQuery анализирует строку во фрагмент DOM и затем вставляет ее. Когда ваш </div><div class="clearfix"> анализируется, предполагается, что </div> является ошибкой, и он также закрывает <div class="clearfix">. Поэтому эффект, который вы наблюдали.

Answer 3

Это потому, что after не изменяет HTML - он создает новые элементы DOM и добавляет их в документ.Вы должны использовать wrapAll, чтобы обернуть группу элементов.Я предполагаю, что ваш код будет выглядеть примерно так:

var start = 0,
    $list = $('#staffscroll .person').slice(0, 6);

while ($list.length) {
    $list.wrapAll('<div class="clearFix"></div>');

    start += 6;
    $list = $list.end().slice(start, start + 6);
}

jsFiddle рабочий пример

Answer 4

Как заменить .wrapAll на .append или подобный?