Jquery .after() not inserting as expected

Question

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.

`
` makes perfect sense. it's `
` that doesn't make sense (invalid html). — Shurdoof, May 30 '11 at 08:55
@Shurdoof it does make sense if the whole "list of divs" is already wrapped in a "clearfix div" I think the OP wants to close the first div and start a new one (like rows in a table?), whether it's possible doing it this way I don't know — clairesuzy, May 30 '11 at 09:00

score 4 · Answer 1 · answered May 30 '11 at 08:56

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.

score 2 · Answer 2 · answered May 30 '11 at 08:57

2

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.

answered May 30 '11 at 08:57

Félix Saparelli

8,424
6
52
67

lonesomeday · Answer 3 · 2011-05-30T09:32:50.880

1

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

edited May 30 '11 at 09:32

answered May 30 '11 at 08:59

lonesomeday

233,373
50
316
318

Well, that sent my code into some endless loop, but I think that's sort of what I'm looking for. – Xavio May 30 '11 at 09:24
And then i just found a solution. http://stackoverflow.com/questions/1432201/how-to-wrap-every-3-child-divs-with-html-using-jquery/1432455#1432455 – Xavio May 30 '11 at 09:36

score 0 · Answer 4 · answered Jan 02 '14 at 03:55

0

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

answered Jan 02 '14 at 03:55

user3152167

1
1

Jquery .after() not inserting as expected

4 Answers4