Traverse siblings to find next and previous div with jQuery

Question

I need to search through multiple siblings to add a class the next and previous divs. Right now, the class is being added to the next div but only the next div if it's a sibling. Here is my HTML:

 jQuery('.next').click(function() { var newImg = jQuery('.currentimg').next('.thumbnail').css('background-image'); newImg = newImg.replace('url(','').replace(')','').replace(/\\"/gi, ""); var oldImg = jQuery('.currentimg'); jQuery(oldImg).next('.thumbnail').addClass('currentimg'); jQuery(oldImg).removeClass('currentimg'); jQuery('.featured-image').html('<img src="'+newImg+'"><div class="button prev"><span><</span><span><</span></div><div class="button next"><span>></span><span>></span></div>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="thumbnail currentimg">1</div> <div class="thumbnail">2</div> </div> <div class="wrap"> <div class="thumbnail">3</div> <div class="thumbnail">4</div> </div> <div class="wrap"> <div class="thumbnail">5</div> <div class="thumbnail">6</div> </div> <div class="wrap"> <div class="thumbnail">7</div> <div class="thumbnail">8</div> </div> <div class="next">next</div> <div class="previous">prev</div> 

Answer 1

Possibly something like this. It should let you find next regardless if they are siblings or not. Added a background color to easy see which one is current.

 var allThumbnails = $('.thumbnail'); $('.next').click(function() { var currentImg = allThumbnails.filter('.currentimg'); var nextIndex = (allThumbnails.index(currentImg) + 1) % allThumbnails.length; var nextImg = allThumbnails.eq(nextIndex); var newImg = nextImg.css('background-image').replace('url(', '').replace(')', '').replace(/\\"/gi, ""); currentImg.removeClass('currentimg'); nextImg.addClass('currentimg'); $('.featured-image').html('<img src="' + newImg + '"><div class="button prev"><span><</span><span><</span></div><div class="button next"><span>></span><span>></span></div>'); }); 

 .currentimg { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="thumbnail currentimg">1</div> <div class="thumbnail">2</div> </div> <div class="wrap"> <div class="thumbnail">3</div> <div class="thumbnail">4</div> </div> <div class="wrap"> <div class="thumbnail">5</div> <div class="thumbnail">6</div> </div> <div class="wrap"> <div class="thumbnail">7</div> <div class="thumbnail">8</div> </div> <div class="next">next</div> <div class="previous">prev</div>