jQuery目标是整个DOM中同一个类的下一个目标

Question

如果我有这个HTML：

<section class="slide current"></section>

<section>
  <div class="slide"></div>
  <div class="slide"></div>
</section>

<section class="slide"></section>

如何使用jQuery / js基于slide类的位置来定位下一个和上一个current类？

Answer 1

由于slide元素可以嵌套在任何级别上，因此当您单击其中一些元素时需要循环每个幻灯片元素，然后根据循环中的当前索引查找prev和next

$('.slide').click(function() {
  let all = $('.slide');
  all.removeClass('current next prev');

  let slides = Array.from(all);
  $(this).addClass('current');

  slides.forEach(function(e, i) {

    let el = $(e);

    if (el.hasClass('current')) {
      let prev, next;
      if (slides[i - 1]) prev = $(slides[i - 1]);
      if (slides[i + 1]) next = $(slides[i + 1]);

      if (prev) prev.addClass('prev');
      if (next) next.addClass('next');
    }
  })
})

.slide{cursor: pointer; padding: 5px;}
.current {color: green;}
.prev {color: blue}
.next {color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="slide current">1</section>
<section>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <div>
    <div>
      <div class="slide">4</div>
    </div>
  </div>
</section>
<section class="slide">5</section>