jQuery: appendTo parent

Question

I can't seem to get the appendTo to work. What do I do wrong?

$('div:nth-child(2n) img').appendTo(parent);

Current markup:

<div class="container">
  <img src="123.jpg" />
  <p>Hey</p>
</div>
<div class="container">
  <img src="123.jpg" />
  <p>Hey</p>
</div>

I want this output:

<div class="container">
  <p>Hey</p>
  <img src="123.jpg" />
</div>
<div class="container">
  <p>Hey</p>
  <img src="123.jpg" />
</div>

Please help me guys... I'm tearing my hair of every minute.. :-S

Solution 1

The following should suffice:

$("div>img").each(function(){
    $(this).appendTo($(this).parent());
});

See it working here: http://jsfiddle.net/EtxqL/

You can't infer each item's parent from the 'selector' parameter to appendTo(). The only way to do what you want is to loop through the items, appending each one to its parent. Check out the APIs in the following link.

.appendTo() API

.each API

Solution 2

Is this what you're after?

$('.container > img').each(function () {
    $(this).parent().append(this);
});

It simply takes the <img> within every container and moves as the first child of the container.

Solution 3

You can use .prepend() instead of append Append insert at the end off a the parent. But prepend insert at the begin from the parent. so then like:

$('.container > p').each(function () {
    $(parent).prepend(this);
});