如何根据嵌套元素的类来改变父div？

Question

我想根据图像的宽度来调整我的图像幻灯片容器，所以只有当高度大于宽度时才会进行调整，这是我目前所做的。

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');
    }
  })
});

这很好，只要高度大于宽度，我就会得到 "肖像 "类。

我想只在 "portrait "类出现时才进行修改。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');
    }
  })
});

但没有结果。

将感激任何帮助与这一个

衷心感谢

Answer 1

你忘了 $ 两次，还把 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>