jQuery move node out of its parent

Question

I have this code:

<ul class="list">
  <li>
    <a href="#" >
      <img src="IMAGE" />
      SOME TEXT
    </a>
  </li>
  <li>
    <a href="#" >
      <img src="ANOTHER IMAGE" />
      SOME DIFFERENT TEXT
    </a>
  </li>
</ul>

I want the images prepended to the parent node like this:

<ul class="list">
  <li>
    <img src="IMAGE" />
    <a href="#" >
      SOME TEXT
    </a>
  </li>
  <li>
    <img src="ANOTHER IMAGE" />
    <a href="#" >
      SOME DIFFERENT TEXT
    </a>
  </li>
</ul>

any particular event should be triggered when the append happens? ... have you already attempted any JS code? — Gabriel Spiteri, Jun 17 '11 at 09:42
Not sure what you are wanting to do... Are you adding the `img` tags with jQuery after the rest of the code shown in your example is already in the DOM? — James Allardice, Jun 17 '11 at 09:42
there is no trigger needed, when the dom is ready it should be detached and append immediately after the li tag like in my example,.. and yes i already tried some code but its a little bit complicated so ive choosen this simple code example — YeppThat'sMe, Jun 17 '11 at 09:45
Well in that case the answer @Alnitak has given you should be perfect. — James Allardice, Jun 17 '11 at 09:46
totally agree with ElGabbu please try first Google then post your question and make your questions clear — abhijit, Jun 17 '11 at 09:48
@user64837 sorry 'bout that but dont you think that even more examples in web help more people in future? — YeppThat'sMe, Jun 17 '11 at 10:02
@YeppThat'sMe don't worry about them, I doubt it would be at all easy to find the answer you needed on Google. — Alnitak, Jun 17 '11 at 10:06
sorry if you got offended dear...meant just try before you post!! — abhijit, Jun 18 '11 at 10:12

Alnitak · Accepted Answer · 2011-06-17T10:20:59.867

26

Try this:

$('.list > li > a > img').each(function() {
    $(this).insertBefore($(this).parent());
})

Demo at http://jsfiddle.net/alnitak/3nEVz/

EDIT I came up with a cleaner version:

$('.list > li > a > img').each(function() {
    $(this).parent().before(this);
})

edited Jun 17 '11 at 10:20

answered Jun 17 '11 at 09:43

Alnitak

334,560
70
407
495

yeah, I just revised to change that while you were commenting – Alnitak Jun 17 '11 at 09:48
nb: I've gone this route rather than simply prepend to the `
` since it explicitly moves the "img" before the "a", regardless of any other elements that might be present.

Alnitak

Jun 17 '11 at 09:50

oh GREAT,.. it works perfectly even in my complicated case :) BIIIG thanks :) – YeppThat'sMe Jun 17 '11 at 09:52

@Alnitak: Good point and worthwhile clarification. Depends whether the OP's objective is to keep the `img` with the `a` or have it as the first element in the `li`. – Luke Bennett Jun 17 '11 at 09:53

@Luke well the title was "append to parent", so I figured keeping it with the `a` was the right thing to do. – Alnitak Jun 17 '11 at 10:02

score 3 · Answer 2 · answered Jun 17 '11 at 09:46

3

$('ul.list img').each(function(_, elem) {
    var $elem = $(elem);
    $elem.prependTo( $elem.closest('li') );
});

demo: http://jsfiddle.net/hPbZD/1/

answered Jun 17 '11 at 09:46

jAndy

231,737
57
305
359

score 1 · Answer 3 · answered Jun 17 '11 at 09:46

1

Try this:

$(function() {
    $('ul.list > li > a > img').each(function() {
      $(this).closest('li').prepend(this);
    });
});

See it in action here.

answered Jun 17 '11 at 09:46

Luke Bennett

32,786
3
30
57

jQuery move node out of its parent

3 Answers3

Linked

Related