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