jQuery for each div class find child and insertAfter

Question

I am editing my blog theme and I need to move (cut and paste) multiple specific divs under itself within a specific blog post.

The current HTML would be

<div class="blog_post text_post">
    <div class="post_container">
        <div class="bottom_meta"></div>
        <div class="post_date"></div>
        <div class="moreinfo"></div>
        <!-- I need .bottom_meta here -->
    </div>
</div>

I managed to make it work like this:

$(".blog_post.text_post .bottom_meta").insertAfter(".blog_post.text_post .moreinfo");

And on first sight it looks okay,but when I wrote another text post (usually posts are images) it makes a mess on my blog. The code now moves .bottom_meta from both posts under both .moreinfo .

I tried using each function but I failed multiple times...

$(".blog_post.text_post").each(function(){     
     $(this).children(".bottom_meta").insertAfter.$(this).children(".moreinfo");
});

I tried the same with 'find' function instead of 'children',still a fail.

Can anyone help me out with this or at least point me out to the right direction.

Answer 1

It should be:

$(".blog_post.text_post").each(function(){     
    $(this).find(".bottom_meta").insertAfter($(this).find(".moreinfo"));
});

Example Here

• Change .insertAfter.$(this).children(...) to: .insertAfter($(this).children(...))

• Also, since the .moreinfo/.bottom_meta elements aren't direct children, you need to use .find() rather than .children().

You can also simplify it to the following:

$(".blog_post.text_post").each(function () {
    $(".bottom_meta", this).insertAfter($(".moreinfo", this));
});

Example Here