Jquery .after() not inserting as expected

EDIT: Solution found How to wrap every 3 child divs with html using jquery?

I'm printing a list with a lot of <div>'s and want to insert a </div><div class="clearfix"> after every 6th <div> with jQuery.

Naturally that would be something like

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

But the output becomes <div class="clearfix"></div> which just doesn't make sense.

Any thoughts?

Ok, maybe should provide some more code..

I'm working with a slideshowscript. The whole take is basicly to put stuff in a <div>.

For example..

<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>

The problem is that I'm working with a CMS aswell, which havn't got that much control over dynamic output. So my thought was that I just could output all the content, and then provide the slide-wrappers afterwards.

Therefore the </div><div class="clearfix">

Havn't got a clue if it makes any more or less sense now, but I hope you get what I'm trying to do.

The statement you try to insert isn't correct XML. You are thinking about your HTML document as a big string, but this is the wrong way to do if you want to use tools like jQuery.

I suggest you to learn more about DOM and how to use it. Your whole approach is wrong, so your sample of code isn't correctable.

IIRC, jQuery parses the string to a DOM fragment and then inserts it. When your </div><div class="clearfix"> is parsed it's assumed the </div> is an error, and it also closes the <div class="clearfix">. Therefore the effect you observed.

That's because after isn't modifying the HTML -- it's creating new DOM elements and adding them to the document. You should use wrapAll to wrap a group of elements. My guess is that your code will look something like this:

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 working example

As I replace the .wrapAll for .append or a similiar?