javascript - 选择主动滑动

Question

我有这样的代码结构，我需要为每个第一个和最后一个事件元素设置一些属性。我该怎么做？

<div class="slick-slider">
    <div class="slide-item slick-slide ">
        1
    </div>
    <div class="slide-item slick-slide ">
        1
    </div>
    <div class="slide-item slick-slide slick-active slick-current">
        1
    </div>
    <div class="slide-item slick-slide slick-active">
        1
    </div>
    <div class="slide-item slick-slide slick-active">
        1
    </div>
    <div class="slide-item slick-slide slick-active">
        1
    </div>
    <div class="slide-item slick-slide ">
        1
    </div>
    <div class="slide-item slick-slide ">
        1
    </div>  
</div>

Answer 1

您可以简单地使用 JQuery 的 :first 和 :last 属性选择器来获取所需类的第一个和最后一个元素，如下所示:

var firstSlick = $('.slick-active:first');
var lastSlick = $('.slick-active:last');

$(firstSlick).addClass('first-slick');
$(lastSlick).addClass('last-slick');

.first-slick{
  color:green;
}

.last-slick{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slick-slider">
    <div class="slide-item slick-slide ">
        1
    </div>
    <div class="slide-item slick-slide ">
        1
    </div>
    <div class="slide-item slick-slide slick-active slick-current">
        1
    </div>
    <div class="slide-item slick-slide slick-active">
        1
    </div>
    <div class="slide-item slick-slide slick-active">
        1
    </div>
    <div class="slide-item slick-slide slick-active">
        1
    </div>
    <div class="slide-item slick-slide ">
        1
    </div>
    <div class="slide-item slick-slide ">
        1
    </div>  
</div>

为了更好地理解，我向第一个和最后一个元素添加了 first-slick 和 last-slick 类。