时间戳

首页 > 解决方案 > 如何根据一类嵌套元素更改父 div

javascript - 如何根据一类嵌套元素更改父 div

问题描述

我想根据图像的宽度调整我的图像幻灯片容器，因此只有当高度大于宽度时才会进行调整，这就是我目前所拥有的：

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

但没有结果：/

将不胜感激任何帮助！

非常感谢

标签： javascripthtmljquerycssparent-child

解决方案

您忘记了$两次，并且还在imgjQuery 选择器中添加了引号：

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>

推荐阅读