jquery $('。class')。each()有多少项?

时间:2011-02-28 22:48:00

标签: jquery jquery-selectors

使用jquery选择器循环遍历一组项目时,有没有办法找出该集合中有多少项?

4 个答案:

答案 0 :(得分:92)

如果您使用的是链式语法:

$(".class").each(function() {
    // ...
});

...我认为each函数中的代码没有任何(合理的)方法可以知道有多少项。 (不合理的方式会涉及重复选择器并使用index。)

但是,使用each中正在调用的函数可以轻松使用该集合。这是一种方法:

var collection = $(".class");
collection.each(function() {
    // You can access `collection.length` here.
});

作为一个有点复杂的选项,您可以将jQuery对象转换为数组,然后使用数组的forEach。传递给forEach回调的参数是被访问的条目(jQuery给你的是this第二个参数),该条目的索引,和你调用它的数组:

$(".class").get().forEach(function(entry, index, array) {
    // Here, array.length is the total number of items
});

假定至少模糊的现代JavaScript引擎和/或Array#forEach的垫片。

或者就此而言,给自己一个新工具:

// Loop through the jQuery set calling the callback:
//    loop(callback, thisArg);
// Callback gets called with `this` set to `thisArg` unless `thisArg`
// is falsey, in which case `this` will be the element being visited.
// Arguments to callback are `element`, `index`, and `set`, where
// `element` is the element being visited, `index` is its index in the
// set, and `set` is the jQuery set `loop` was called on.
// Callback's return value is ignored unless it's `=== false`, in which case
// it stops the loop.
$.fn.loop = function(callback, thisArg) {
    var me = this;
    return this.each(function(index, element) {
        return callback.call(thisArg || element, element, index, me);
    });
};

用法:

$(".class").loop(function(element, index, set) {
    // Here, set.length is the length of the set
});

答案 1 :(得分:4)

使用.length属性。 一个函数。

alert($('.class').length); // alerts a nonnegative number 

答案 2 :(得分:4)

如果您使用的jQuery版本低于1.8版本,则可以使用$('。class')。size(),该参数采用零参数。有关.size()方法的更多信息,请参阅documentation

但是,如果您使用(或计划升级)到1.8或更高版本,则可以使用$('。class')。length属性。有关.length属性的详细信息,请参阅documentation

答案 3 :(得分:1)

您的意思是lengthsize()

参考:http://api.jquery.com/length/