Odd jQuery .insertAfter behaviour (messes up DOM structure completley)

Question

No idea why, but

if ($(this).find(':nth-child(2)').is("span")) {
    var moveForward = $(this).find(".postInfo.forVideo");
$(this).find(':nth-child(2)').insertAfter(moveForward);

}

Is basically doing what it should, but it also changes the order of many other things. Like in a really really odd way.

It's hard to demo this via pasted code, i think just visually you'll be able to see the weirdness:

Before After

As you can see, it's almost randomly pulling elements out of the div "postInfo forVideo". You can see it here (for now, as this site is in development) here: http://syndex.me .

For example, why would it pull out the polygon element which is in the "pagecurl" div and then throw that after the span i'm working with? So odd!

Answer 1

nth-child will select all elements that are the second child of their respective parent. You probably just want the second child of the element.

var secondChild = $(this).children().eq(2);
if (secondChild.is("span")) {
    var moveForward = $(this).find(".postInfo.forVideo");
    secondChild.insertAfter(moveForward);