javascript - 将 ul 中的第一项插入到最后

Question

我研究了如何使用 $("#slideShow1 ul li:first").appendTo('#slideshow1 ul'); 将 ul 中的第一项附加到最后一项我想为幻灯片添加一些额外的效果，但我发现即使移动 li 元素也不起作用。

这是关于 http://jsfiddle.net/7L4b8cbd/4/ 的 html 和演示

<div id="slideShowContainer">
    <div id="slideShow">

        <ul>
            <li><img src="http://demo.tutorialzine.com/2010/11/rotating-slideshow-jquery-css3/img/photos/1.jpg" width="100%" alt="Fish" /></li>
            <li><img src="http://demo.tutorialzine.com/2010/11/rotating-slideshow-jquery-css3/img/photos/2.jpg" width="100%" alt="Ancient" /></li>
            <li><img src="http://demo.tutorialzine.com/2010/11/rotating-slideshow-jquery-css3/img/photos/3.jpg" width="100%" alt="Industry" /></li>
            <li><img src="http://demo.tutorialzine.com/2010/11/rotating-slideshow-jquery-css3/img/photos/4.jpg" width="100%" alt="Rain" /></li>
        </ul>

    </div>

    <a id="previousLink" href="#">&raquo;</a>
    <a id="nextLink" href="#">&laquo;</a>

</div>

jQuery

$("#slideShow ul li:first").appendTo('#slideshow ul');
$("#slideShow ul li:first").appendTo('#slideshow ul');
$("#slideShow ul li:first").appendTo('#slideshow ul');

编辑: 我现在引用的是正确的 ul，但它现在仍在工作。

Answer 1

我不知道你的三个 jQuery 语句是如何工作的，但下面的代码应该可以完成这项工作:

var x = $("#slideShow ul li:first");
$("#slideShow ul li:first").remove();
$('#slideShow ul').append(x);

这会将第一个元素移动到最后一个。根据需要重复多次。

结帐 - http://jsfiddle.net/7L4b8cbd/5/