使用jQuery计算具有class名称的可见div数量

Question

我在使用带有类名的:visible时遇到了问题。

例如：

<div class="groupedDiv" id="group1">
    <div class="level1">
        Apples
        <div class="level2"> || L2-apple </div>
    </div>

    <div class="level1" style="display:none;">
        Oranges 
        <div class="level2"> || [L2-orange] </div>
    </div>
</div>

<br/>

<div class="groupedDiv" id="group1">
    <div class="level1">
        Roses
        <div class="level2"> || L2-rose </div>
        <div class="level3"> l3 rose </div>
    </div>
</div>

如果我想计算类名为level1的可见div元素数量，$(".level1 :visible").length;输出3，而不是应该输出2吗？ $(".level1 :visible").parent().length;输出2，这是正确的。

我在http://jsfiddle.net/metalhawk/P87jS/创建了这个示例。

有任何建议都很有用。谢谢。

- ravi.panch

Answer 1

$(".level1").find(":visible")是一个后代选择器：你选择了所有可见的元素，这些元素是在.level1下面的后代元素。在.level1元素下有三个可见的div元素。

请改用以下代码：

$(".level1:visible").length;

看我的更新后的 jsfiddle。

- lonesomeday

---

@lonesomeday，有没有办法在页面上隐藏/显示div时实时更新它？就像实时更新一样？它在页面加载时运行得很好，但是对于排序/搜索，其中div被删除，有没有办法让它改变？ - Collarbone

@JamisonHill 每次运行它时，它都会给出当前数字。每次更改后，您需要再次运行选择器。可能有更优雅的方法来实现这一点，但是如果不深入查看您的代码，很难说。 - lonesomeday

@lonesomeday - 这是我的代码jFiddle链接。非常简单，但搜索时没有更新：http://jsfiddle.net/KYjfk/10/ 请告诉我你的想法。 - Collarbone

Answer 2

我相信你需要执行$(".level1:visible").length;

空格打破了代码

- dpmguise