Please, i know that probabily this is a really easy question, but no matter what i try i can't make it work. I have few divs with the same class on my page, and i would like to show only divs that have an image inside. Can someone help please?
拜托,我知道这可能是一个非常简单的问题,但无论我尝试什么,我都无法使其发挥作用。我的页面上有几个同一个类的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>
3 个解决方案
#1
3
You can use the :has selector:
你可以使用:has选择器:
$('.two').hide().filter(':has(img)').show();
#2
2
Traversing up from images
You could base your selector on the images themselves, and from there traverse back up to the parents and toggle their visibility. One way would be to use the $.fn.parent method:
您可以将选择器基于图像本身,然后从那里遍历到父母并切换其可见性。一种方法是使用$ .fn.parent方法:
$(".two img").parent().show();
This approach is fairly quick, taking just under 3ms for me. The above demonstrates the execution path.
这种方法相当快,对我来说只需不到3ms。以上演示了执行路径。
Filtering a collection
Alternatively, you could select all of the .two instances, and then filter that collection based on the presence of img elements using the $.fn.has function:
或者,您可以选择所有.two实例,然后使用$ .fn.has函数根据img元素的存在过滤该集合:
$(".two").has("img").show();
This method is a bit more involved, judging by the flame chart above, and took roughy 5ms compared to the quicker alternative above. You could alternative use the pseudo-selector :has, however this would mean you could no longer take advantage of performance optimizations that leverage querySelectorAll.
从上面的火焰图表来看,这种方法更复杂一些,与上面的快速替代方案相比,采用粗糙的5ms。您可以选择使用伪选择器:has,但这意味着您无法再利用利用querySelectorAll的性能优化。
Show Some, Hide Others...
The above approaches assume .two elements are hidden initially. If this is not the case, the following could achieve this for you:
上述方法假设。最初隐藏了两个元素。如果不是这种情况,以下内容可以为您实现:
$(".two").hide().has("img").show();
This approach selects all instances of .two, hides them, filters that selection to only those that have an img element among their children, and show's the resulting set.
这种方法选择.two的所有实例,隐藏它们,将选择过滤到仅在其子项中具有img元素的那些实例,并显示结果集。
Flame charts based on jQuery 2.0.2 in Chrome 32
基于Chrome 32中的jQuery 2.0.2的火焰图表
#3
1
This is incredibly easy with straight JavaScript not to mention a lot faster:
使用直接的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';
}
}
#1
3
You can use the :has selector:
你可以使用:has选择器:
$('.two').hide().filter(':has(img)').show();
#2
2
Traversing up from images
You could base your selector on the images themselves, and from there traverse back up to the parents and toggle their visibility. One way would be to use the $.fn.parent method:
您可以将选择器基于图像本身,然后从那里遍历到父母并切换其可见性。一种方法是使用$ .fn.parent方法:
$(".two img").parent().show();
This approach is fairly quick, taking just under 3ms for me. The above demonstrates the execution path.
这种方法相当快,对我来说只需不到3ms。以上演示了执行路径。
Filtering a collection
Alternatively, you could select all of the .two instances, and then filter that collection based on the presence of img elements using the $.fn.has function:
或者,您可以选择所有.two实例,然后使用$ .fn.has函数根据img元素的存在过滤该集合:
$(".two").has("img").show();
This method is a bit more involved, judging by the flame chart above, and took roughy 5ms compared to the quicker alternative above. You could alternative use the pseudo-selector :has, however this would mean you could no longer take advantage of performance optimizations that leverage querySelectorAll.
从上面的火焰图表来看,这种方法更复杂一些,与上面的快速替代方案相比,采用粗糙的5ms。您可以选择使用伪选择器:has,但这意味着您无法再利用利用querySelectorAll的性能优化。
Show Some, Hide Others...
The above approaches assume .two elements are hidden initially. If this is not the case, the following could achieve this for you:
上述方法假设。最初隐藏了两个元素。如果不是这种情况,以下内容可以为您实现:
$(".two").hide().has("img").show();
This approach selects all instances of .two, hides them, filters that selection to only those that have an img element among their children, and show's the resulting set.
这种方法选择.two的所有实例,隐藏它们,将选择过滤到仅在其子项中具有img元素的那些实例,并显示结果集。
Flame charts based on jQuery 2.0.2 in Chrome 32
基于Chrome 32中的jQuery 2.0.2的火焰图表
#3
1
This is incredibly easy with straight JavaScript not to mention a lot faster:
使用直接的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';
}
}