Как я могу изменить родительский div на основе класса вложенного элемента - PullRequest
Новая
       20

Как я могу изменить родительский div на основе класса вложенного элемента

0 голосов
/ 25 мая 2020

Я хотел бы настроить контейнер для слайдов изображения в зависимости от ширины изображения, поэтому настройка будет происходить только в том случае, если высота больше ширины, вот что у меня есть на данный момент: 

jQuery(document).ready(function($) {
  var imgs = $('.swiper-slide-image');
  imgs.each(function() {
    var img = $(this);
    var width = img.width();
    var height = img.height();
    if (width < height) {
      img.addClass('portrait');
    } else {
      img.addClass('landscape');
    }
  })
});

Это хорошо работает, я получаю "портретный" класс, когда высота больше ширины.

Я хочу внести изменения только при наличии "портретного" класса. html выглядит так: 

<div class="swiper-slide">
  <figure class="swiper-slide-inner">
    <img class="swiper-slide-image portrait" />
  </figure>
</div>

Мне нужно настроить таргетинг div.swiper-slide - мне нужно только добавить к нему специальный класс.

Я пробовал следующее: 

jQuery(document).ready(function($) {
  $('.swiper-slide-image').each(function() {
    var imgs = $('.swiper-slide-image');
    if ((img).hasClass("portrait")) {
      (this).parents('.swiper-slide').addClass('special-one');
    }
  })
});

, но безрезультатно: /

Буду признателен за любую помощь с этим!

Большое спасибо

1 Ответ

0 голосов
/ 25 мая 2020

Вы забыли $ два раза, а также поместить img в кавычки в селекторе jQuery: 

jQuery(document).ready(function($) {
  $('.swiper-slide-image').each(function() {
    var imgs = $('.swiper-slide-image');
    if ($('img').hasClass("portrait")) {
      $(this).parents('.swiper-slide').addClass('special-one');
    }
  })
});
.special-one {
  border: 5px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="swiper-slide">
  <figure class="swiper-slide-inner">
    <img class="swiper-slide-image portrait" / src="https://placehold.it/300x200/b9a">
  </figure>
</div>
...