使用jquery查找活动元素和后3个元素

Question

我正在尝试使用jquery查找活动幻灯片（类名= swiper-slide-active），然后包括接下来的3个元素以在其中放置一些CSS代码。

HTML：

<div class="swiper-slide swiper-slide-active">...</div> ## use jquery to find this class
<div class="swiper-slide">...</div> ## and this one
<div class="swiper-slide">...</div> ## and this one
<div class="swiper-slide">...</div> ## and this one
<div class="swiper-slide">...</div> ## not this
<div class="swiper-slide">...</div> ## not this
<div class="swiper-slide">...</div> ## not this
<div class="swiper-slide">...</div> ## not this
<div class="swiper-slide">...</div> ## not this

我尝试了以下操作：

$('.swiper-slide-active').css({opacity:.5}).next('.swiper-slide:lt(3)').css({opacity:.5});

但是它不起作用，我也尝试过这个：

$('.swiper-slide-active').slice(0,3).css({opacity:.5});

任何帮助将不胜感激！

Answer 1

您需要使用nextAll()，然后应用.slice(0, 3。

$('.swiper-slide-active').nextAll().slice(0, 3).css({
  opacity: .5
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="swiper-slide swiper-slide-active">## use jquery to find this class</div>
<div class="swiper-slide">## and this one</div>
<div class="swiper-slide">## and this one</div>
<div class="swiper-slide">## and this one</div>
<div class="swiper-slide">##</div>
<div class="swiper-slide">##</div>
<div class="swiper-slide">##</div>
<div class="swiper-slide">##</div>
<div class="swiper-slide">##</div>
<div class="swiper-slide">##</div>