使用jQuery计算可见div的数量

Question

HTML：

<div class="male">...</div>
<div class="male">...</div>
<div class="female">...</div>

我有几个类别为分类的 div（还有一些没有 .male 的 div 内部），在启动时，我使用以下代码计数：

$('.male').size(); // Returns 40 items for example

（我知道 size(); 已被弃用，但我们使用较旧版本的jQuery）

在应用程序中，某些div在特定点击后会变为不可见状态，我想重新计算可见项目。

我尝试过

$('.male :visible').size();

但是它给了我一个可怕的高数字，像3050这样，所以我认为选择器确实计算了.male内所有可见的div或其他什么东西。

有人能告诉我只选择特定类中可见的div的正确选择器吗？

- Daniel W.

---

你正在收集 .male 容器内的所有元素（不仅仅是 div）。那么 $('div.male:visible').size() 呢？ - opalenzuela

即使是旧版本也包含.length，不是吗？ ;) - ThiefMaster

@ThiefMaster 我尝试使用.length()，但是它给了我一个错误，我在源代码中留下了一条评论，以防万一.. :-) - Daniel W.

这是一个属性，而不是方法。 - ThiefMaster

@ThiefMaster 谢谢你的建议，我修改了代码，现在可以使用.length了。 - Daniel W.

Answer 1

你需要移除 .male 和 :visible 之间的空格，否则你会选中 .male 内所有可见元素。

$('.male:visible').size();

这里是一个快速的JSFiddle演示，展示了两者的区别。

更新：jQuery 1.8已经弃用其size()方法，推荐使用JavaScript的length属性代替。现在我们可以这样做：

$('.male:visible').length;

- James Donnelly

Answer 2

将选择器中的空格去掉：

$('.male:visible').size();

- tymeJV