jquery - jquery将元素移动到最后一个子位置

Question

假设我有一个<div>包含一些随机元素的元素，但是我使用这个独特的选择器创建了一个元素 : $('.myUniqueElement')。我想用.insertAfter()在我的最后一个子位置移动这个元素，<div>这可能吗？解决办法是什么？

这是我的解决方案：http: //jsfiddle.net/silverlight/RmB5K/3/可以吗？

HTML：

<div class='p'>
    <div class='myUniqueElement'>unique</div>
    <div>item</div>
    <div>item</div>
    <div>item</div>
</div>
<input type='button' id='b' value='Do'/>

Javascript：

$('#b').on('click',function(){
    $('.myUniqueElement').insertAfter($('.p :last-child'))
});

CSS：

.myUniqueElement{color:red;}

score 50 · Accepted Answer

尝试

var mydiv = $('my-div-selector');
mydiv.find('.myUniqueElement').appendTo(mydiv)

或简单

$('my-div').append($('.myUniqueElement'))

score 10 · Accepted Answer

没有必要使用.insertAfter. 您也不应该使用它.clone，因为它会删除任何附加的数据或事件，除非您使用.clone(true).

只需使用.appendTo将目标元素添加到div，它将从其原始位置分离并添加为的最后一个子元素div：

$('.myUniqueElement').appendTo('#my-div');

score 2 · Accepted Answer

这是我的解决方案，我认为这是我可以使用的最佳方式.insertAfter()：

HTML：

<div class='p'>
    <div class='myUniqueElement'>unique</div>
    <div>item</div>
    <div>item</div>
    <div>item</div>
</div>
<input type='button' id='b' value='Do'/>

jQuery：

$('#b').on('click',function(){
    $('.myUniqueElement').insertAfter($('.p :last-child'))
});

关键是:last-child 这就是小提琴：http: //jsfiddle.net/silverlight/RmB5K/3/

score 1 · Accepted Answer

无需多次调用 $，只需将元素移动到其父元素的末尾即可：

var myEl = $('.my-el-selector');
myEl.appendTo(myEl.parent());

score -1 · Accepted Answer

为了使用insertAfter()，您必须知道要将元素移动到的元素。正如你所说，你有随机元素，当然你不知道当前的最后一个元素，所以这里你可以做什么。

克隆要移动的元素并将其附加到父元素。

jQuery 代码如下所示：

$clone_elem = $('.myUniqueElement').clone();
$('.myUniqueElement').remove();
$('div').append($clone_elem);

签出这个小提琴

score -1 · Accepted Answer

维卡斯是对的。然而，这可能是它的改进版本，因为原始元素被删除，而不是它的克隆......

    $elem = $('.myUniqueElement')
    $('div').append($elem.clone());
    $elem.remove();

jquery - jquery将元素移动到最后一个子位置

6 回答 6

Related

Reference