Jquery 获取列表项的总宽度

我使用了一点jQuery来获得ul容器的大小，并自动设置每个li上的填充以相应地填充空间，因为每个li的大小不同。我设置了这些变量来获得每个li的宽度，但我无法计算出如何将每个li的总宽度相加

$('nav ul li').each(function() {
    var $this = $(this),
        width = $this.outerWidth();

    $this.after($('<div>' + width + '</div>'));
});

$（'nav ul li'）。每个（函数（）{
变量$this=$（this），
宽度=$this.outerWidth（）；
$this.after（$（''+宽度+''）；
});

之后的div只是一个测试，检查它是否获得了正确的宽度。

---

如何将每个li的总宽度相加？谢谢

在您的示例中，是局部变量。因此宽度不会更新

var width  = 0;

$('nav ul li').each(function() {
    var $this = $(this),
        width =width + $this.outerWidth();
       $this.after($('<div>' + width + '</div>'));   

});

var宽度=0；
$（'nav ul li'）。每个（函数（）{
变量$this=$（this），
宽度=宽度+this.outerWidth（）；
$this.after（$（''+宽度+''）；
});

只需在每个函数外部定义

宽度

变量，并在每次调用时更新它：

var width = 0;
$('nav ul li').each(function() {
    var $this = $(this);
    width += $this.outerWidth();

    $this.after($('<div>' + width + '</div>'));
});

var宽度=0；
$（'nav ul li'）。每个（函数（）{
var$this=$（this）；
宽度+=$this.outerWidth（）；
$this.after（$（''+宽度+''）；
});

---

仅供参考，这是因为javascript闭包。看看这个问题的解释：

对不起？感谢您的回复，但我不确定我是否理解在each函数外部定义width变量将如何返回所有列表项宽度的总和？

width

从0开始，并且在

每个

函数的每次迭代中，下一个元素的外部宽度将添加到

width

（请注意，

+=

）。在“each”遍历所有元素后，

宽度将是所有外部宽度的总和。谢谢，非常抱歉，我完全错过了+=，因此无法计算出您的响应。谢谢！！