在jquery中计算具有相同类的元素的数量

Posted 2023-03-06

【中文标题】在jquery中计算具有相同类的元素的数量

【英文标题】：Counting the number of elements with the same class in jquery

【发布时间】：2011-10-31 14:34:10

【问题描述】：

如何在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 的长度。我如何正确地得到这个？

【问题讨论】：

尝试在警报中使用.capital_class 而不是this。

【参考方案1】：

将警报更改为：

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

记住事件是在单个元素上调用的，所以this 只是一个元素——你必须在事件发生后让 jQuery 查询 dom。 （第一个查询只是设置实时处理以创建事件处理程序。）

【参考方案2】：

使用这个：

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

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

函数中的this指的是事件目标，当你做$(this).length时，它返回1，因为该元素没有任何重复。

【参考方案3】：

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

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

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

);

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

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

现在，如果您向收到事件的元素添加和删除其他类，它将始终只匹配那些具有所有相同类的元素。

---

如果您想要匹配所有具有任何一个类的元素，那么请执行以下操作：

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

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

);

这只是在选择器中添加一个逗号来分隔类，创建一个multiple-selector^[docs]。