используйте jquery, чтобы найти активный элемент и следующие 3 элемента - PullRequest
Новая
       26

используйте jquery, чтобы найти активный элемент и следующие 3 элемента

2 голосов
/ 01 октября 2019

Я пытаюсь использовать 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});

Буду признателен за любую помощь!

1 Ответ

1 голос
/ 01 октября 2019

Вам необходимо использовать 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>
...