具有相同类的多个div，但仅显示内部带有图像的div

Question

拜托，我知道这可能是一个非常简单的问题，但无论我尝试什么，我都无法使其发挥作用。我的页面上有几个同一个类的div，我想只显示里面有图像的div。有人可以帮忙吗？

<div class="one">
   <div class="two"><img src="some.jpg" /></div> <!-- show this -->
   <div class="two"><img src="some_other.jpg" /></div> <!-- show this -->
   <div class="two"></div> <!-- hide this -->
</div>

Answer 1

您可以使用:has选择器：

$('.two').hide().filter(':has(img)').show();

Answer 2

从图像遍历

您可以将选择器基于图像本身，然后从那里遍历到父母并切换其可见性。一种方法是使用$.fn.parent method：

$(".two img").parent().show();

这种方法相当快，对我来说只需不到3ms。以上演示了执行路径。

过滤集合

或者，您可以选择所有.two个实例，然后使用$.fn.has函数根据img元素的存在过滤该集合：

$(".two").has("img").show();

从上面的火焰图表来看，这种方法更复杂一些，并且与上面的更快的替代方案相比，花了5ms。您可以选择使用伪选择器:has，但这意味着您无法再利用利用querySelectorAll的性能优化。

显示一些，隐藏他人......

以上方法假设.two元素最初是隐藏的。如果不是这种情况，以下内容可以为您实现：

$(".two").hide().has("img").show();

此方法选择.two的所有实例，隐藏它们，仅将选择过滤到其子项中具有img元素的那些实例，并显示结果集。

基于Chrome 32中的jQuery 2.0.2的火焰图

Answer 3

对于直接的JavaScript而言，这非常简单，更不用说更快了：

var images = document.querySelectorAll('.two');
for (var i = 0; i < images.length; i++) {
    var self = images[i];
    if (!self.childNodes[0]) {
        self.style.display = 'none';
    }
}

jsFiddle