Question

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

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

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

Answer 1

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

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 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

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

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

3 个答案: