Question

我正在尝试将“无图像”元素的高度设置为其父项的兄弟姐妹的子（实际）img元素（如果存在）的高度。我不确定如何形成查询。这是我所拥有的：

var noImage = $('.no-image');
var image = $('.item .item-thumb a.link img.image');

function noImageHeight() {
  noImage.each(function() {
    let thumbHt = $(this).parent('.item').siblings('.item').find(image).height();
    console.log(thumbHt);
    $(this).css('min-height', thumbHt);
  });
}
noImageHeight();

body {
  font-family: Arial;
}

.item {
  width: 200px;
  .item-thumb {
    a.link {
      text-decoration: none;
      display: block;
      img {}
      .no-image {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        justify-items: center;
        background-color: gray;
        color: black;
        font-size: 22px;
      }
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="item-thumb">
    <a href="#" class="link">
      <img class="image" src="https://picsum.photos/id/686/200/120" alt="img">
    </a>
  </div>
</div>
<div class="item">
  <div class="item-thumb">
    <a href="#" class="link">
      <div class="no-image">No Image</div>
    </a>
  </div>
</div>
<div class="item">
  <div class="item-thumb">
    <a href="#" class="link">
      <div class="no-image">No Image</div>
    </a>
  </div>
</div>
<div class="item">
  <div class="item-thumb">
    <a href="#" class="link">
      <img class="image" src="https://picsum.photos/id/686/200/120" alt="img">
    </a>
  </div>
</div>
<div class="item">
  <div class="item-thumb">
    <a href="#" class="link">
      <div class="no-image">No Image</div>
    </a>
  </div>
</div>

Answer 1

将js更改为

var noImage = $('.no-image');
var image = $('.item-thumb a.link img.image');

function noImageHeight() {
  noImage.each(function() {
    let thumbHt = $(this).parents('.item').siblings('.item').find(image).height();
    console.log(thumbHt);
    $(this).css('min-height', thumbHt);
  });
}
noImageHeight();

与find（）一起使用的选择器已经过滤为“ .image”。还需要将“父级”更改为“父级”，因为您需要根据需要而不是仅仅进行1级。

Answer 2

.no-image的父级是.item-thumb，而不是.item。使用.closest()来搜索层次结构，以找到与类最接近的容器。

请注意，.siblings(".item").find(image).height()将始终返回所有同级中的第一张图像的高度，而不是最接近您起始图像的高度。

var noImage = $('.no-image');
var image = $('.item .item-thumb a.link img.image');

function noImageHeight() {
  noImage.each(function() {
    let thumbHt = $(this).closest('.item').siblings('.item').find(image).height();
    console.log(thumbHt);
    $(this).css('min-height', thumbHt);
  });
}
noImageHeight();

body {
  font-family: Arial;
}

.item {
  width: 200px;
  .item-thumb {
    a.link {
      text-decoration: none;
      display: block;
      img {}
      .no-image {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        justify-items: center;
        background-color: gray;
        color: black;
        font-size: 22px;
      }
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="item-thumb">
    <a href="#" class="link">
      <img class="image" src="https://picsum.photos/id/686/200/120" alt="img">
    </a>
  </div>
</div>
<div class="item">
  <div class="item-thumb">
    <a href="#" class="link">
      <div class="no-image">No Image</div>
    </a>
  </div>
</div>
<div class="item">
  <div class="item-thumb">
    <a href="#" class="link">
      <div class="no-image">No Image</div>
    </a>
  </div>
</div>
<div class="item">
  <div class="item-thumb">
    <a href="#" class="link">
      <img class="image" src="https://picsum.photos/id/686/200/120" alt="img">
    </a>
  </div>
</div>
<div class="item">
  <div class="item-thumb">
    <a href="#" class="link">
      <div class="no-image">No Image</div>
    </a>
  </div>
</div>

jQuery遍历-包含特定元素的父级最接近的同级

2 个答案: