用jQuery计算具有相同类的元素数量

Question

我该如何使用jQuery计算动态生成的具有相同类名的元素数量？

我找到了一个类似的问题，但很遗憾它没有起作用。

我做了类似于以下答案的东西： jQuery counting elements by class; what is the best way to implement this?

$('.capital_class').live('blur', function(){

alert($(this).length);
});

具有 capital_class 类的元素是动态生成的。但是每当我失去焦点时，我总是得到长度为1的结果。如何正确获取其长度？

- Wern Ancheta

---

尝试在提醒框中使用.capital_class，而不是this。 - Puzo

Answer 1

把警报改成这样：

alert($('.capital_class').length);

请记住事件仅在单个元素上触发，所以this只是一个单一的元素--你必须在事件发生后使用jQuery查询DOM。（第一个查询只是设置实时处理来创建事件处理程序。）

- Hogan

Answer 2

使用以下内容：

$('.capital_class').live('blur', function(){

alert($('.capital_class').length);
});

this在函数中表示事件目标，当你执行$(this).length时，它返回1，因为该元素没有重复。

- Digital Plane

Answer 3

在这种情况下，这可能不是您所需的内容，但为了使其更具动态性，以防您有多个类并且希望确保所有类匹配，您可以这样做：

$('.capital_class').live('blur', function(){

    var classes_selector = '.' + $.trim(this.className).replace(/\s+/g,'.');
    alert($( classes_selector ).length);

});

你基本上是将 className 属性中一个或多个连续空格的所有实例替换为单个 . 字符。这是因为 class-selector^[文档] 能够根据匹配提供的 所有 类来进行选择。

它还使用 jQuery.trim()^[文档] 方法来消除任何前导/尾随空格。

现在，如果您向接收事件的元素添加和删除其他类，则始终仅匹配具有完全相同类的那些元素。

---

如果您想匹配所有具有原始元素类中的任何一个类的元素，则可以执行以下操作：

$('.capital_class').live('blur', function(){

    var classes_selector = '.' + $.trim(this.className).replace(/\s+/g,',.');
    alert($( classes_selector ).length);

});

这只是在选择器中添加逗号以分隔类，从而创建一个多重选择器^[文档]。

- user113716