I have a class that contains a bunch of divs with attached ids. With jQuery, I am attempting to cycle through these divs dynamically.
My 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>
My jQuery, which upon click, erases the html of the #result and attempts to append the next item underneath the parent div .tplandesclist. However, I know there is something wrong with the way I'm trying to do this. I am attempting to do it by using the .next() method instead of implementing some sort of counter and rewriting the algorithm completely.
$(document).ready(function(){
$(".arrow").click(function(){
$("#result").html(' ');
$("#result").append().find(".tplandesclist")).next()
});
});
Any help greatly appreciated!
Try
$(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());
});
});
Demo: Fiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.