Question

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

上的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/

在ul中插入第一个项目以持续

2 个答案: