将元素移动到最后一个子元素位置的jQuery方法

Question

假设我有一个包含某些随机元素的

，但是有一个元素我使用了这个唯一的选择器：$('.myUniqueElement')。我想使用.insertAfter()将此元素移动到我的

中的最后一个子位置，是否可能？该怎么解决？

这是我的解决方案：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;}

- Omid

---

发布你的HTML片段... - Marc Audet

这是我的解决方案，可以吗？fiddle - Pejman

请使用 Fiddle 查看我的答复。 - vikas devde

有很多方法可以做到这一点，你的解决方案和@vikasdevde的解决方案都是有效的（它们都能工作！）。 - Marc Audet

我想要缩小我的代码，而不是创建一个克隆并删除最后一个，你知道当.insertAfter()移动一个元素时它确切地在做什么吗？ - Pejman

我从未阅读过jQuery源代码，所以我不知道细节...但我认为除非你明确地创建一个副本（克隆），否则元素永远不会被克隆。 - Marc Audet

Answer 1

尝试

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

或者简单点说

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

- Arun P Johny

Answer 2

不需要使用.insertAfter。也不要使用.clone，因为它会删除任何附加的数据或事件，除非你使用.clone(true)。

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

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

- Alnitak

Answer 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/。

- Pejman

Answer 4

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

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

- Fabio Caccamo

Answer 5

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

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

jQuery代码如下：

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

看一下这个样例

- vikas devde

---

很好，你找到了更好的解决方案，给你点赞。 - vikas devde

.clone 应该只在你真正想要复制一个元素时使用。移动元素可以轻松地完成而无需复制它们。 - Alnitak

Answer 6

Vikas是正确的。然而，这可能是它的改进版本，因为原始元素被删除了，而不是它的克隆...

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

- Yudho Ahmad Diponegoro