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

Posted 2023-03-11

【中文标题】jQuery：获取每个元素的宽度并将它们相加

【英文标题】：jQuery: get each element's width and sum them up

【发布时间】：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)的总数。

谢谢。

【参考方案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;

【讨论】：

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