如何将第一个孩子移到最后？

Question

我在div容器中有一些div项目,我想连续动画它们.

我知道如何在无限循环中运行我的函数,但选择第一个div,动画它并在完成动画后将其移动到最后是一个问题.

我的函数看起来像这样:

function MoveItems() {
        $(".container:first").animate(
            {width: "0px"},
            1000,
            function (){ 
                $('.container').append($(this));
                $('.container').remove($(this));
            }
        );
};

我做错了什么？; /

编辑:

你是正确的删除,但动画仍然无法正常工作.

我认为选择器不能正常工作.

我的HTML是:

<div class="container">
<div class="image"><a href=""><img src="img/image001.jpg" /><span>IMAGE001</span></a></div>
<div class="image"><a href=""><img src="img/image002.jpg" /><span>IMAGE002</span></a></div>
<div class="image"><a href=""><img src="img/image003.jpg" /><span>IMAGE003</span></a></div>
  <div class="image"><a href=""><img src="img/image004.jpg" /><span>IMAGE004</span></a></div>
</div>

但是在运行函数MoveItems之后有一次:

<div class="container" style="width: 0px; overflow: hidden;">
    <div class="image"><a href=""><img src="img/image001.jpg"><span>IMAGE001</span></a></div>
    <div class="image"><a href=""><img src="img/image002.jpg"><span>IMAGE002</span></a></div>
    <div class="image"><a href=""><img src="img/image003.jpg"><span>IMAGE003</span></a></div>
    <div class="image"><a href=""><img src="img/image004.jpg"><span>IMAGE004</span></a></div>
</div>

因此,函数在.container上运行,而不是容器的第一个子元素.我在这里更具体吗？:)

Answer 1

$(".container:first") 选择它找到的第一个.container.

你要 $(".container>div:first")

您还可以通过对父进行操作来"加速"最终的删除/追加,而不是对.container进行另一个DOM搜索:

var $me = $(this);
$me.parent().append($me);

Answer 2

append自动从父项中删除子项并将其放在最后.remove将再次删除孩子,而不重新添加.

只是放弃线: $('.container').remove($(this));