我有一个包含一堆带有附加ID的div的类。使用jQuery,我试图动态循环遍历这些div。
我的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,点击后,会删除#result的html,并尝试在父div .tplandesclist下面附加下一个项目。但是,我知道我试图这样做的方式有问题。我试图通过使用.next()方法来实现它,而不是实现某种计数器并完全重写算法。
$(document).ready(function(){
$(".arrow").click(function(){
$("#result").html(' ');
$("#result").append().find(".tplandesclist")).next()
});
});
任何帮助都非常感谢!
答案 0 :(得分:4)
尝试
$(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