jQuery：获取每个元素的宽度并将它们相加答案

【问题标题】：jQuery: get each element's width and sum them upjQuery：获取每个元素的宽度并将它们相加
【发布时间】：2011-08-25 17:54:51
【问题描述】：

我怎样才能得到每个元素的宽度并总结它们？

例如，这里是 HTML：

<div id="container">
<div class="block-item" style="width:10px"></div>
<div class="block-item" style="width:50px"></div>
<div class="block-item" style="width:90px"></div>
<div>

我可以考虑循环遍历每个元素，但是如何将这些数字相加呢？

$('.block-item').each(function(index) {
    alert($(this).width());
});

我想得到150 (10 + 50 + 90)的总数。

谢谢。

【问题讨论】：

标签： jquery each column-width

【解决方案1】：

使用parseInt(value, radix):

var totalWidth = 0;

$('.block-item').each(function(index) {
    totalWidth += parseInt($(this).width(), 10);
});

这是example fiddle。

【讨论】：

可能想要一个 += 作为收集器，是吗？
@Alex 谢谢，我在创建小提琴时自己发现了那个愚蠢的错字。
10 是一个基数。没有它，解析时可能会得到意想不到的结果。这样你就得到了以 10 为底的结果，而不是八进制。
如果您可以选择使用reduce()，您可以通过$('.block-item').get().reduce(function(width, el){ return width + $(el).width() }, 0)进一步简化此操作

【解决方案2】：

var w = GetWidths('.block-item');

function GetWidths(id) {
    var i = 0;

    $(id).each(function (index) {
        i += parseInt($(this).width(), 10);
    });

    return i;
}

【讨论】：

简洁优雅地使用彼此之间传递的变量和函数。