我有这样的代码结构,我需要为每个第一个和最后一个事件元素设置一些属性。我该怎么做?
<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>
最佳答案
您可以简单地使用 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
类。
关于javascript - 选择主动滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45711263/