Question

我的html页面中有一堆div标签。现在我需要编写一个jQuery来计算网格的值。在下面的示例中，我将使用grid0作为基本ID，我希望该系列中的计数为1。

<div id="grid00">0</div>
<div id="grid01">0</div>
<div id="grid02">0</div>
<div id="grid03">1</div>
<div id="grid04">0</div>
<div id="grid05">0</div>

在下面给出的另一个例子中，我将使用从grid1开始的id，总值为6.请指导我！

<div id="grid10">5</div>
<div id="grid11">0</div>
<div id="grid12">0</div>
<div id="grid13">1</div>
<div id="grid14">0</div>
<div id="grid15">0</div>

我试过这个jQuery("div[id^='grid0']")。但这给了我所有的元素。但我需要使用其中的值进行计数。

谢谢！

Answer 1

首先选择带有starts-with选择器的div并循环显示结果，然后计算输入整数的文本值。

function GetSum(prefix) {
    var sum = 0;
    $("div[id^='" + prefix + "']").each(function(){
        sum += parseInt($(this).text());
    });
    return sum;
}

var grid0Total = GetSum("grid0");
var grid1Total = GetSum("grid1");

或者如果你想进一步使用jQuery函数：

jQuery.extend({
    gridSum: function(prefix) { 
        var sum = 0;
        if(!!prefix) { 
            $("div[id^='" + prefix + "']").each(function(){
                sum += parseInt($(this).text());
            });
        }
        return sum;
    }
});

然后你可以写：

var grid0Total = jQuery.gridSum("grid0");
var grid1Total = jQuery.gridSum("grid1");

你也可以使用map()函数：

var sum = 0;
$("div[id^='" + prefix + "']").map(function(){
    return sum += parseInt($(this).text());
});
return sum;

在此处查看所有内容：http://jsfiddle.net/FpmFW/1/

Answer 2

尝试：

function total(idPrefix) {
    var total = 0;
    $('div[id^="' + idPrefix + '"]').each(function() {
        total += parseInt($(this).text());
    });
    return total;
}

var grid0total = total('grid0'),
    grid1total = total('grid1');

请参阅：http://jsfiddle.net/Au8Fr/

Answer 3

我会给所有网格div一个普通的类。像这样：

<div class="grid" id="myGrids">
<div class="grid" id="grid10">5</div>
<div class="grid" id="grid11">0</div>
<div class="grid" id="grid12">0</div>
<div class="grid" id="grid13">1</div>
<div class="grid" id="grid14">0</div>
<div class="grid" id="grid15">0</div>
</div>

现在您可以轻松计算其值：

var count=0;
$(".grid").each(function(){
 count+=parseInt($(this).text())
})

Answer 4

您可以像这样遍历所有grid0X divs：

var countOnes = 0;
$('div[id^=grid0]').each(function() {
    if ($(this).text() === "1") {
        ++countOnes;
    }
});

找到ID 以 div开头的所有grid0元素（所以，grid00，grid01等）。循环计算其中有多少只包含文本“1”，这是我在你的问题中所认为的想法;如果没有，循环逻辑很容易被操纵。

同样，对于grid1X，只需将选择器更改为使用1而不是0。

或者，如果这些div在某种容器中，你可以使用一个选择器来找到容器然后循环它的子容器，例如：

HTML：

<div id="grid0">
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>1</div>
    <div>0</div>
    <div>0</div>
</div>

JavaScript的：

$("#grid0 > div").each(...);

...并避免拥有所有这些ID。

需要帮助构建这个jQuery

4 个答案: