jQuery - 如何查找是否显示所有匹配元素:none?

Question

我有一个类似于下面简化代码的 div 列表，我通过下拉列表设置了一个过滤器(因此，如果您在下拉列表中选择一个选项，则所有不匹配的 div 都会被删除)设置为显示:无)。

<div id="productlist">
   <div class="product book">Title</div>
   <div class="product book">Title</div>
   <div class="product game">Title</div>
   <div class="product movie">Title</div>
   <div class="product game">Title</div>
</div>

如果没有匹配项，我想显示一条消息来说明这一点。

有没有一种方法可以设置 if 语句，如果所有与“product”类匹配的 div(或者 #productlist 的所有直接子级)都设置为 display:none，则显示消息？

谢谢

Answer 1

这是通过使用 :visible 选择器和 .length 方法(例如 so)来实现的

if ($('.product:visible').length == 0)
{
    alert('No visible products found.');
}