使用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>