Jquery prependTo添加2个列表项，而不是1个

我有一个带.pre和.next按钮的转盘。单击。将li:last预移动到li:first，反之亦然

如果只有一个转盘，当我添加两个具有不同ID的转盘时，单击即可。pre会在前面添加2个li，而不是1个li。为什么呢

        <div class="carrousel" id="featuredAppartments">

            <a href="" class="move pre">Previous</a> <a href="" class="move next ">Next</a>

            <div class="list">
                <ul>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonLowered">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonRented">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonNew">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonNew">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonNew">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonNew">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonNew">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                </ul>
            </div>

            <script>

                $(document).ready(function() {

                    var t = $('#featuredAppartments ul');

                    $('.next').click(function(event) {event.preventDefault();t.find('li:first').appendTo(t);});
                    $('.pre').click(function(event) {event.preventDefault();t.find('li:last').prependTo(t);});

                });

            </script>

        </div>

更新：

我把剧本改成了这个，但是第二个旋转木马仍然增加了2个李，而不是1个

            <script>

                $(document).ready(function() {

                    var t = $('#featuredAppartments ul');

                    $('#featuredAppartments .next').click(function(event) {event.preventDefault();t.find('li:first').appendTo(t);});
                    $('#featuredAppartments .pre').click(function(event) {event.preventDefault();t.find('li:last').prependTo(t);});

                });

            </script>

您的代码显示$'.pre'，它将把click处理程序附加到具有pre类集的每个元素。因此，当用户单击一次时，两个转盘都会响应，每个转盘都会添加自己的li

---

您需要使选择器或处理程序更加具体…

此问题的答案在于您没有提供的第二个旋转木马的代码。。 我只是很快地从您的代码中创建了一个JSFIDLE。它没有任何好的标记，所以我建议重写它

基本上，您可能忘记了适当地更改某些变量。。就像你的t.find

假设第二个转盘有更多的id。所以你的JS看起来像：

$(document).ready(function() {
    var t = $('#featuredAppartments ul');

    $('#featuredAppartments .next').click(function(event) {event.preventDefault();t.find('li:first').appendTo(t);});
    $('#featuredAppartments .pre').click(function(event) {event.preventDefault();t.find('li:last').prependTo(t);});

    var d = $('#more ul');

    $('#more .next').click(function(event) {event.preventDefault();d.find('li:first').appendTo(d);});
    $('#more .pre').click(function(event) {event.preventDefault();d.find('li:last').prependTo(d);});

});

---

现在，您可以通过旋转木马ID选择按钮，并且只访问每个旋转木马中的列表。希望有帮助。

这有关系吗？因为任何点击any.pre都是可以的，因为它选择了var t，这是一个特定的选择器：t.find'li:first'。appendtook，我得到了。。但是为什么第二个旋转木马会增加2个项目而不是1个？