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

【问题标题】：Traverse siblings to find next and previous div with jQuery使用 jQuery 遍历兄弟姐妹以查找下一个和上一个 div
【发布时间】：2017-07-27 20:30:52
【问题描述】：

我需要搜索多个兄弟以在下一个和上一个 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>

【问题讨论】：

好吧，我明白了。我更新了我的代码。

标签： javascript jquery html

【解决方案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>

【讨论】：