CODEWITHSUNDEEP
jqueryappendappendto
curly_brackets
curly_brackets

Reputation: 5598

jQuery: appendTo parent

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

Upvotes: 22

Views: 68183

Answers (4)

Simon
Simon

Reputation: 381

I made a little example and I hope you mean the same thing...

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

Upvotes: 1

Yoram de Langen
Yoram de Langen

Reputation: 5499

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);
});

Upvotes: 2

Mutation Person
Mutation Person

Reputation: 30498

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

Upvotes: 40

David Tang
David Tang

Reputation: 93674

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.

Upvotes: 8

Related Questions