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

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)');

希望这对您有所帮助。