如何解决多个光滑问题
我在页面上有多个光滑的滑块,其中包含不同数量的项目。 如果项目的长度 >= 3,则必须启动光滑的滑块。我不知道如何解决这个问题。 下面是代码示例:
<div class="diploma-carousel">
<div class="diploma-carousel-list">
<div class="diploma-carousel-item">
</div>
<div class="diploma-carousel-item">
</div>
<div class="diploma-carousel-item">
</div>
<div class="diploma-carousel-item">
</div>
</div>
<div class="diploma-carousel-list">
<div class="diploma-carousel-item">
</div>
<div class="diploma-carousel-item">
</div>
</div>
<div class="diploma-carousel-list">
<div class="diploma-carousel-item">
</div>
<div class="diploma-carousel-item">
</div>
</div>
</div>
$('.diploma-carousel-list').each(function(item) {
let sliderItems = $(this).find('.diploma-carousel-item');
let sliderItemsLength = sliderItems.length;
if (sliderItemsLength >= 3) {
$(this).parent().closest().slick();
}
});
感谢您的帮助。
解决方法
-
函数中的
-
$(this)
是.diploma-carousel-list
循环当前迭代中 CSS 类each()
的元素。 -
$(this).parent()
因此是具有 CSS 类.diploma-carousel
的容器。 -
$(this).parent().closest()
将是<div class="diploma-carousel">
的祖先(未显示在您的示例代码中)
由于您可能希望将 Slick Slider 直接应用于 diploma-carousel-list
元素,因此只需使用 $(this).slick();
而不是 $(this).parent().closest().slick();
即可。
编辑:
$(this).parent().closest()
绝对不选择任何东西,因为 closest()
沿着 DOM 向上移动并返回第一个元素 - 包括当前元素 - 匹配给定选择器。使用不带任何参数的 closest()
只会返回一个空的 jQuery 对象。有关详细信息,请参阅 https://api.jquery.com/closest/。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。