如何获取匹配条件返回的jQuery元素的数量?

时间:2011-12-20 23:57:59

标签: javascript jquery

我在一组元素上有一个jQuery过滤器,用于检查哪些项目的值低于90且超过100.我想要做的是获取符合这些条件的项目数量并最终保存它们在页面的其他地方输出:

$("#dtarget li").filter(function()
{
    if (parseInt(this.innerText) < 90)
    {
        $(this).css("color","red");
    }
    else if (parseInt(this.innerText) > 100)
    {
        $(this).css("color","gold");
    }
});

我是jQuery和Javascript的新手,所以很容易。

4 个答案:

答案 0 :(得分:1)

http://api.jquery.com/length

您可以在jQuery对象上调用.length以获取它包含的DOM元素的数量。

//this will return a jQuery object with elements who's value is less than 90
var less_than_90 = $("#dtarget li").filter(function()
{
    var text = $(this).text();
    if (parseInt(text) < 90)
    {
        return true;
    }
    return false;
});

//then you can get the number of DOM elements within the jQuery object created above
var less_than_90_count = less_than_90.length;

然后,也可以对大于100的任何事情进行此操作。

请注意,我删除了this.innerText以支持$(this).text(),因为您已经在使用jQuery了,您可以尽情享受它。

以下是演示:http://jsfiddle.net/acyZC/1/

答案 1 :(得分:1)

我只想为每一个添加一个计数器

var redCounter = 0,
    goldCounter = 0;

$("#dtarget li").filter(function() {
    if (parseInt(this.innerText) < 90) {
        $(this).css("color","red");
        redCounter++;
    }
    else if (parseInt(this.innerText) > 100) {
        $(this).css("color","gold");
        goldCounter++;
    }
});

答案 2 :(得分:0)

也许这会奏效:

var count = $("#dtarget li").filter(function()
{
    if (parseInt(this.innerText) < 90)
    {
        return true;
    }
    else if (parseInt(this.innerText) > 100)
    {
        return true;
    }else{
        return false;
    }
}).length;

编辑:return是受限制的项目。我在想什么。

答案 3 :(得分:0)

我认为您不了解.filter()的目的。它用于根据某些标准或函数减少给定jQuery对象中的项数。如果使用函数作为.filter(fn)的参数,则从过滤器返回true以在最终集合中包含元素,并返回false以将其删除。你两个都没做。

如果您只想迭代jQuery对象,请使用.each(),而不是.filter()

要保存jQuery对象的结果,只需将其分配给这样的变量并迭代使用.each()

var $targets = $("#dtarget li").each(function()
{
    if (parseInt(this.innerText) < 90)
    {
        $(this).css("color","red");
    }
    else if (parseInt(this.innerText) > 100)
    {
        $(this).css("color","gold");
    }
});

您可以稍后使用变量$ targets来引用它,您可以使用$ targets.length找出该jQuery对象中有多少元素。例如:

if ($targets.length > 1) {
    $targets.css("padding-left", "10px");
}