jquery - 选择 "grandchild"

Question

我有一个具有挑战性的问题!

让我们看看三种可能的情况

场景一

<div class="entry-content">
   <p><a href="#"><img src="#"></a></p>
</div>

场景 2

<div class="entry-content">
   <p>&nbsp;</p>
   <p><a href="#"><img src="#"></a></p>
</div>

场景 3

<div class="entry-content">
   <p>&nbsp;</p>
   <p>text</p>
   <p><a href="#"><img src="#"></a></p>
</div>

数量<p>或其他元素将是未定义的。我如何才能只选择第一个 img 来执行“display:none;”？

我的猜测是我必须将 .entry-content 作为父级，但如果我执行 img:first-child，它需要 <p>作为 parent ，如果有更多图片，将不显示所有图片。这就是为什么应该像祖父那样:D 如果我们必须使用其他语言而不是 CSS，我当然持开放态度。

Answer 1

使用纯 CSS 无法做到这一点，但在 jQuery 中非常简单，无论如何您很可能已经在页面上加载了它:

jQuery(document).ready(function($){
    $('.entry-content img').first().hide();
});

演示: http://jsfiddle.net/pq7rwfv3/