Search code examples
javascriptjqueryhtmlprepend

jQuery move node out of its parent


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>

Solution

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