遍历兄弟姐妹以使用jQuery查找下一个和上一个div

Question

我需要搜索多个同级，以在下一个和上一个div中添加一个类。 现在，该类将添加到下一个div，但如果是同级则仅添加到下一个div。 这是我的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

可能是这样的。 无论它们是否是兄弟姐妹，它都应该让您找到下一个。 添加了背景色，以方便查看当前颜色。

 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>