JQuery переместить узел из своего родителя

Question

У меня есть этот код:

<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>

Я хочу, чтобы изображения были добавлены к родительскому узлу следующим образом:

<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>

Answer 1

Попробуйте:

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

Демо на http://jsfiddle.net/alnitak/3nEVz/

РЕДАКТИРОВАТЬ Я придумал более чистую версию:

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

Answer 2

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

демо : http://jsfiddle.net/hPbZD/1/

Answer 3

Попробуйте это:

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

Смотрите это в действии здесь .