jQuery get next element after first match

Question

Hello,

I think my problem may be quite simple, but after trying different approaches I just don't get it.

The UI that I want to implement basically looks like this:

-Prev | Image 1 (Active) | Image 2 | Image 3 | Image n| Next-

I want to allow user to change active image by pressing Next or Prev buttons.

HTML for my UI looks like this:

<ul class="slideshow">
 <li><a href="#" id="prev">Prev</a></li>
 <li><a href="#" class="pic-act"><img src="1.png"  class="thumb" /></a></li>
 <li><a href="#" class="pic"><img src="2.png"  class="thumb" /></a></li>
 <li><a href="#" class="pic"><img src="3.png"  class="thumb" /></a></li>
 <li><a href="#" id="prev">Next</a></li>  
</ul>

I want to create jQuery script that would find first li element with pic-act class and thh next element that has pic class attached. After that I want to remove pic-act class from first element and add pic class to it and then I want to add pic-act class to second element.

I try to accomplish this with follow jQuery code

$(document).ready(function() {
$("#next").click(function(){
 var next = $(".pic-act ~ .pic");
 $(next).attr("class", "pic-act");
 $(".pic_act:first").attr("class", pic);  
}); 
});

Unfortunately this code is unable to find next non pic-act element :(

My second requirement is when user reaches last li element and presses "Next" button one more time, the very first li element is becomes active. (Same with "Prev" button)

I hope this makes sense.

Thank You very much in advance!

Answer 1

This should work

 $(document).ready(function() {
   $("#next").click(function(){ 
      var elem = $(this).prev(".pic-art");// once you got here you would compare to anchor tag id last for second requirement
      var nextele = elem.find(".pic");
      elem.addClass("pic");
      elem.removeClass("pic-act");
      nextele.addClass("pic-act");
      nextele.removeClass("pic");
    }); 
 });

for the second requirement you could just add an id to the first and last anchor tag and compare the selector to it and go from there

Answer 2

Maybe this:

$(function(){
        $('#next').click(function(){
                var $elem = $('.slideshow .pic-act').removeClass('pic-act').addClass('pic').next('.pic');
                if ($elem.length < 1){
                        $('.slideshow .pic').eq(0).addClass('pic-act').removeClass('pic');
                }else{
                        $elem.removeClass('pic').addClass('pic-act');
                }
        });     
});

Answer 3

The main problem that I see with your code is that you're looking in the global space for the two elements side by side instead of finding the currently selected element and then traversing for siblings.

If you're creating a slideshow as a learning exercise or personal project, I'd recommend looking into the jQuery traversing documentation as has been hinted at in other purely code answers. The way you wrote your code shows that you are probably still trying to understand how jQuery fits together and it might be a good idea to spend some time with the excellent documentation on jQuery's site, work through a few tutorials and/or get a jQuery book. Hint: chaining is awesome

If you're creating a slideshow for a professional project, I'd recommend finding a plugin created by someone else. It'll take less time and likely be of higher quality since it will have been created by someone who has a lot of experience with jQuery/JS (I compared my implementation of a slideshow with a professional's implementation: the professional's was head and shoulders above mine).