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

我想做的是：

检查the-post-thumbnail div中是否图像，如果是，则隐藏post-body
检查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)');

希望这有帮助。

Answer 2

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

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

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

2 个答案: