javascript - 你如何只选择它的兄弟之后的前两个 div 元素？

Question

我正在为轮播使用 slick.js 插件。我只想选择 .slick0-current 类之后的前两个元素。

Hy HTML 代码是:

<div class="slick-slide slick-current slick-active" data-slick-index="3" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide03" style="width: 150px;"></div>

<div class="slick-slide slick-active" data-slick-index="4" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide04" style="width: 150px;"></div>

<div class="slick-slide slick-active" data-slick-index="5" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide05" style="width: 150px;">next</div>

我可以选择 .slick0-current 类，但我在选择紧随其后的两个元素时遇到问题。我试过使用类似于 .slick-active:nth-child(2) 的东西，但这对我不起作用。

我的 jQuery 代码是:

jQuery( ".slick-next").click(function() {
  jQuery(".slick-current").text("Im Previous");
  jQuery(".slick-active").siblings(".slick-slide.slick-active").eq(0).html("Im Current");
  jQuery(".slick-active").siblings(".slick-slide.slick-active").eq(2).html("Im After");

});

Answer 1

每次您使用“.slick-next”点击功能时，不会将 slider 弄乱到旋转木马的末尾。使用 slick 事件不是更好吗？

更新演示.. https://jsfiddle.net/joshmoto/6u314kwg/4/

$('.carousel').slick({

  // slick stuff

}).on('afterChange', function(event, slick, currentSlide, nextSlide) {

  $('.slick-current',this).prev().text("Im Previous");
  $('.slick-current',this).text("Im Current");
  $('.slick-current',this).next().text("Im After");

});

如果您希望更改在动画之前发生，您可以将 afterChange 编辑为 beforeChange。

这可能有点问题，但它是一个开始。如果轮播是无限模式，它应该可以工作，因为它只会更改克隆的幻灯片。