prependTo添加2個列表項而不是1

Question

我有一個.pre和.next按鈕的卡魯塞爾。點擊.pre會將li移至li：最後移至li：首先以及其他方式。

這工作得很好，如果只有一個卡魯塞爾，當我添加2個不同ID的卡魯塞爾點擊.pre添加2個李的前面，而不是1.爲什麼？

 <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> 

UPDATE：

我改劇本到這一點，但在第二輪播還是增加了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> 

Answer 1

的這個問題的答案就在你的代碼的第二個轉盤，你沒有提供.. 我只是做了一個jsfiddle很快從你的代碼。它沒有任何好的標記，所以我建議重寫它。 http://jsfiddle.net/PQQEe/

基本上你可能忘了適當改變一些變量..喜歡你t.find ..

比方說2號傳送帶的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的按鈕，你也只有每個傳送帶內訪問列表。希望能幫助到你。

Answer 2

您的代碼表示$('.pre')，這將附加點擊處理程序到每個元素與pre類集。所以當用戶點擊一次時，兩個傳送帶響應，並且每個都添加自己的li。

你想使你的選擇更具體的，或者你的處理器...