如何将第一个孩子搬到最后? [英] How to move first child to the end?

问题描述

我在div容器中有一些div项目，我想对其连续进行动画处理.

i have some div items in div container and i want to animate them continously.

我知道如何无限循环地运行我的函数，但是选择第一个div并为其设置动画并在完成动画后将其移动到末尾是一个问题.

i know how to run my function in endless loop, but there is a problem with selecting first div, animate it and move it to the end after done animation.

我的功能如下:

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

我做错了什么? ;/

关于删除，您是正确的，但是动画仍然无法正常工作.

You are right about remove, but the animation still is not working.

我认为选择器无法正常工作.

i think that selector is not working corectly.

我的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之后，就会出现:

but after running function MoveItems once there is:

<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上运行，而不是容器的第一个子级.我在这里更具体吗? :)

so the functions is operating on .container not a first child of container. am i here more specific? :)

推荐答案

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

$(".container:first") selects the first .container it finds.

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

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

You can also "speed up" the final remove/append by operating on parent instead of doing another DOM search for .container:

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

这篇关于如何将第一个孩子搬到最后?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！