仅当存在特定元素时才将 class 添加到动态生成的 div - Slick Slider

Question

我目前正在使用 Slick Slider by Ken Wheeler 在我网站的产品详情页面上显示特色图片和视频。我的问题是我需要定位其中包含视频的 .slick-slide，但我不确定该怎么做。

这是HTML

<div class="slick-slide slick-current slick-active" data-slick-index="5" aria-hidden="false" role="tabpanel" id="slick-slide05" style="width: 735px;" aria-describedby="slick-slide-control05">
  <div class="product-video">
    <video controlslist="nodownload" loop="" muted="" style="width: 100%; display: inline-block;">
      <source src="https://media.djnetworks.net/media/static/dj-includes/images/video/2020/02/2466486_A.mp4" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>
  </div>
</div>

我能够定位内部 div 并添加 class .product-video（我需要），但还需要定位.slick-slide 并添加 class .video。这是我用来定位内部 div.

的内容

function addVideoClass() {

    // Targets div contain video for mobile slider
    $(".slick-slide > div:has(video)").addClass("product-video");

}

只是不确定如何同时定位外部 div .slick-slide。非常感谢提供的任何帮助。谢谢！

Answer 1

当您定位包含视频的 div 幻灯片时，您还可以链接回父级并添加 class 或在下一行添加 class.

示例 1：

// Targets div contain video for mobile slider
$(".slick-slide > div:has(video)").addClass("product-video").parent().addClass("video");

示例 2：

// Targets div contain video for mobile slider
$(".slick-slide > div:has(video)").addClass("product-video");
$(".slick-slide > div:has(video)").parent().addClass("video");

这里 example 显示了两个选项。

Answer 2

您可以查找 div 包含视频的 .slick-slide

$(".slick-slide:has(div:has(video))")

仅当存在特定元素时才将 class 添加到动态生成的 div - Slick Slider

Adding class to dynamically generated div only when specific elements are present - Slick Slider

html

javascript

slick.js