Добавление класса в динамически генерируемый div только при наличии указанных элементов c - Slick Slider - PullRequest
Новая
       10

Добавление класса в динамически генерируемый div только при наличии указанных элементов c - Slick Slider

0 голосов
/ 29 февраля 2020

В настоящее время я использую Slick Slider от 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 и добавить класс .product-video (который мне нужен), но мне также нужно нацелиться на .slick-slide и добавить класс .видео к нему. Вот то, что я использовал для нацеливания на внутренний div. 

function addVideoClass() {

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

}

Просто не знаю, как нацелиться на внешний div .slick-slide. Любая помощь с благодарностью. Спасибо!

Ответы [ 2 ]

0 голосов
/ 29 февраля 2020

Вы можете найти .slick-slide, в котором есть div, содержащий видео 

$(".slick-slide:has(div:has(video))")
0 голосов
/ 29 февраля 2020

Когда вы нацеливаете слайд, у которого есть div с видео, вы также можете либо вернуться к родительскому элементу и добавить класс, либо в следующей строке добавить класс.

Пример 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");

Вот пример , показывающий два варианта.

...