在ul中插入第一项到最后

Question

我研究了如何使用$("#slideShow1 ul li:first").appendTo('#slideshow1 ul');将ul中的第一个项目追加到最后一个项目$("#slideShow1 ul li:first").appendTo('#slideshow1 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

HTML中的此ID为slideShow ，选择器为slideshow1和slideShow1 ，两者都不匹配。

<div id="slideShowContainer">
    <div id="slideShow1">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
     </div>
</div>

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

http://jsfiddle.net/7L4b8cbd/3/

Answer 2

我不知道您的三个jQuery语句如何工作，但是以下代码可以完成此工作：

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

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

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