遍歷兄弟姐妹以使用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>