jQuery move multiple DOM elements into other elements using their classes (not IDs)

Question

I'm working on a page with multiple blog articles and due to constraints of the current platform/template can't move the comment count in the HTML.

I would like to move the .reaction-count elements from one part of each article into another part.

I've read the solutions on this thread: How to move an element into another element? but I'm still not sure how to translate that into what I need.

Here's what I've tried so far. It's not quite working since it moves all the .reaction-count elements into all the .post-title elements instead of just the .reaction-count for that particular article.

One attempt: http://jsfiddle.net/DanEvans/jbgC4

Another attempt: http://jsfiddle.net/DanEvans/jbgC4/5/

Here's some simplified example HTML that mimics the situation:

<div class="entry-content">
    <h2 class="post-title">
        <a href="#">Post #1</a>
    </h2>

    <p>Lots of other text and elements</p>

    <span class="reaction-count">
        <br><a href="#">Post #1 Comments</a>
    </span>
</div>
<hr>
<div class="entry-content">
    <h2 class="post-title">
        <a href="#">Post #2</a>
    </h2>

    <p>Lots of other text and elements</p>

    <span class="reaction-count">
        <br><a href="#">Post #2 Comments</a>
    </span>
</div>​

One of the first things I tried:

$('.reaction-count').appendTo('.post-title');​

Thanks in advance for any help!

Answer 1

If you are just trying to move the reaction counts into the post-title of the same entry content..

$('.reaction-count').each(function(){
    $(this).parent().find('.post-title').append($(this));
});  ​  ​

(My traversing was wrong).

Would move the reaction-count into the post title within it's parent entry-content on an individual basis.

Fiddle with your CSS included