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

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>

Answer 2

我想这就是你想要的（按钮用于显示之前和之后）：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-body">
   <div class="separator">
      <div class="separator">First div inside post-body</div>
      <div class="separator"><img src=""/>Second div inside post-body</div>
      <div class="separator">Third div inside post-body</div>
      <div class="separator"><img src=""/>Fourth div inside post-body</div>
   </div>
</div>

<input type="button" onclick="myFunction()" value="Click to hide" />

Answer 3

如果有许多匹配元素，jQuery将返回一个由选择器结果的数组。因此，您应该能够通过数组的索引选择第一个元素，并隐藏其父级.post-body：

$($(".post-body img")[0]).parent(".post-body").hide()