使用 jquery 查找活动元素和接下来的 3 个元素

Question

我正在尝试使用 jquery 查找活动幻灯片（class name = 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>

使用 jquery 查找活动元素和接下来的 3 个元素

use jquery to find active element and next 3 elements

jquery

swiper