多个光滑问题

编程问答 2022-04-22

问题描述

我在页面上有多个光滑的滑块，其中包含不同数量的项目。 如果项目的长度 >= 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/。

jqueryslick.jssliderslider