DIV Conditioning - 检查 IMG 是否存在于 DIV 中答案

【问题标题】：DIV Conditioning - Checking if an IMG exists within a DIVDIV Conditioning - 检查 IMG 是否存在于 DIV 中
【发布时间】：2016-02-24 07:12:04
【问题描述】：

我的网站中有以下代码行：

HTML：

<div class="the-post-thumbnail">
    <p><img src="http://placehold.it/350x150/FF0000/FFFFFF?text=Automatic+Thumbnail" alt="" width="" height="" /></p>
</div>

<div class="post-body">
    <p><img src="http://placehold.it/350x150/00FF00/FFFFFF?text=Manual+Thumbnail" alt="" width="" height="" /></p>      
    <p>Paragraph</p>
    <p><img src="http://placehold.it/350x150/0000FF/FFFFFF?text=Body+Image" alt="" width="" height="" /></p>
</div>

JavaScript/jQuery：

var ele = $('.post-body p:has(img):first');

if ($('.the-post-thumbnail img').length) {
  ele.hide();
}

else {
  ele.show();
}

我想做的是：

检查the-post-thumbnail div 中是否有图像，如果有，则隐藏post-body 中的手动缩略图图像
检查the-post-thumbnail div 中是否没有图像，如果是，则在post-body 中显示手动缩略图

这部分工作，但是，我注意到如果我从 post-body div 中删除手动缩略图图像，它也会删除段落标记之后的第二个正文图像。

我怎样才能正确定位直接在post-body div 中的手动缩略图图像，这样我就可以实现上面的两个列表项，而无需添加额外的类？

仅供参考：

这是由于我将网站的主题换成了不同的主题。旧版本要求我在文章顶部手动放置每个帖子的缩略图，而新主题会自动为我做这件事。这导致旧帖子的图像重复。

CodePen Example

【问题讨论】：

标签： javascript jquery html css wordpress

【解决方案1】：

Working fiddle.

只需改变:first 选择器的位置就可以了，因为它总是会选择第一个p 并检查它是否有图像：

var ele = $('.post-body p:first:has(img)');

希望这会有所帮助。

【讨论】：

【解决方案2】：

不使用任何额外的选择器，您可以检查第一段中的图像。

var ele = $('.post-body p:eq(0):has(img)');

【讨论】：