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

你可以使用双向

1.Jquery

$('.slick-slider div.slide-item.slick-active:first') && $('.slick-slider div.slide-item.slick-active:last')

2的 CSS

div.slick-active：last-of-type ， div.slick-active：first-of-type {

}

Answer 2

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

＆＃13;

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

＆＃13;

.first-slick{
  color:green;
}

.last-slick{
  color:red;
}

＆＃13;

<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>

＆＃13;

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

选择活跃的光滑幻灯片

2 个答案: