javascript - 在构建这个 jQuery 时需要帮助

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/