jquery - 隐藏任何包含图像的第一个元素

Question

由于 post-body 包含从链接到 div 的多个元素，我只想隐藏其中包含图像的“第一个”子元素。

<div class="post-body">
  <div class="separator"><img/></div>
</div>

只有一个 .post-body 并且我不想隐藏 .post-body，而是隐藏 .post-body 中的第一个元素包含 img 的 。

Answer 1

使用 :has() 选择器选择 .post-body 中包含图像的所有子元素，然后使用 :first 选择器选择列表中的第一个:

function hide() {
  $('.post-body :has(img):first').hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" onclick="hide()" value="hide first image" />
<div class="post-body">
  <div class="separator">no image</div>
  <a><img/>first image</a>
  <p><img/>second image</p>
</div>