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