javascript - DIV 调节 - 检查 DIV 中是否存在 IMG

Question

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

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();
}

我想做的是:

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

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

如何才能仅定位直接位于 post-body 内的手动缩略图div 是否正确，以便我可以实现上面的两个列表项，而无需添加其他类？

仅供引用:

这是由于将我的网站主题更换为其他主题所致。旧版本要求我在文章顶部手动放置每个帖子的缩略图，而新主题会自动为我完成此操作。这导致旧帖子出现重复的图像。

CodePen Example

Answer 1

<强> Working fiddle 。

只需更改 :first 选择器的位置即可完成工作，因为它将始终选择第一个 p 并检查它是否有图像:

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

希望这有帮助。