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});

任何帮助，将不胜感激！

标签： jqueryswiper

Answer 1

您需要使用nextAll()和 apply .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>