jQuery move node out of its parent
I have this code:
<ul cla开发者_运维技巧ss="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>
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);
})
$('ul.list img').each(function(_, elem) {
var $elem = $(elem);
$elem.prependTo( $elem.closest('li') );
});
demo: http://jsfiddle.net/hPbZD/1/
Try this:
$(function() {
$('ul.list > li > a > img').each(function() {
$(this).closest('li').prepend(this);
});
});
See it in action here.
精彩评论