遍历兄弟用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>