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

【问题标题】：jquery move element to last child positionjquery将元素移动到最后一个子位置
【发布时间】：2023-03-03 05:28:20
【问题描述】：

假设我有一个包含一些随机元素的<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;}

【问题讨论】：

发布您的 HTML sn-p...
这是我的解决方案，可以吗？ fiddle
用小提琴检查我的答案
有很多方法可以做到这一点，你的解决方案和@vikasdevde 的解决方案都是有效的（它们有效！）。
我从来没有读过 jQuery 源代码，所以我不知道细节......但我认为元素永远不会被克隆，除非你明确地创建一个副本（克隆）。

标签： jquery html dom

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

这是我的解决方案，我认为这是我可以使用.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/

【讨论】：

【解决方案4】：

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

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

jQuery 代码如下所示：

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

查看此fiddle

【讨论】：

好，你有更好的解决方案，+1 给你。
.clone 仅应在您确实要复制元素时使用。移动元素无需复制即可轻松完成。

【解决方案5】：

试试

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

或简单

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

【讨论】：

【解决方案6】：

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

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

【讨论】：