Цикл через Divs С jQuery

Question

У меня есть класс, который содержит кучу divs с прикрепленными идентификаторами. С jQuery я пытаюсь циклически перебирать эти divs.

Мой HTML:

   <div id ="result">RESULT GOES HERE</div> 

       <div class = "tplandesclist"> 
        <div id="tplandesc1"><%= tplan.tplandesc %></div> 
        <div id="tplandesc2"><%= tplan.tplandesc2 %></div> 
        <div id="tplandesc3"><%= tplan.tplandesc3 %></div> 
        <div id="tplandesc4"><%= tplan.tplandesc4 %></div> 
        <div id="tplandesc5"><%= tplan.tplandesc5 %></div> 
        <div id="tplandesc6"><%= tplan.tplandesc6 %></div> 
        <div id="tplandesc7"><%= tplan.tplandesc7 %></div> 
        <div id="tplandesc8"><%= tplan.tplandesc8 %></div> 
       </div> 

Мой JQuery, который после щелчка, стирает HTML в #RESULT и пытается добавить следующий пункт под родительским сНу .tplandesclist. Однако, я знаю, что что-то не так с тем, как я пытаюсь это сделать. Я пытаюсь сделать это, используя метод .next() вместо того, чтобы реализовать какой-то счетчик и полностью переписать алгоритм.

$(document).ready(function(){ 
    $(".arrow").click(function(){ 

    $("#result").html(' '); 
    $("#result").append().find(".tplandesclist")).next() 

     }); 
    }); 

Любая помощь очень ценится!

Answer 1

Попробуйте

$(document).ready(function(){ 
    var $list = $(".tplandesclist > div"); 
    $(".arrow").click(function(){ 
     var $next = $list.filter(".current").removeClass('current').next(); 
     if(!$next.length){ 
      $next = $list.first() 
     } 

     $next.addClass('current') 
     $("#result").html('').append($next.clone()); 

    }); 
}); 

Демо: Fiddle