Append/prepend to the container

Question

I have the following HTML code:

<div class="container">
    <div><div>...</div><a class="child" href="#">Example</a></div>..</div></div>
</div>
<div class="container">
    <div><div>...</div><a class="child" href="#">Example</a></div>..</div></div>
</div>
.
.
.
<div class="container">
    <div><div>...</div><a class="child" href="#">Example</a></div>..</div></div>
</div>

And I have the following JavaScript script:

$('a.child').prependTo('div.container');

But this code, instead of making each a element prepended to their own container, makes all a elements prepended to each of the containers. How can I fix this?

Thanks!

Answer 1

Iterate over each a.child, and prepend it.

$('a.child').each(function ()
{
    var $this = $(this);
    $this.prependTo($this.closest('div.container'));
});

http://jsfiddle.net/mattball/tRNUS