jquery - 获取列表项总宽度

Question

我有一点 jQuery 来获取 ul 容器的大小，并自动设置每个 li 上的填充以相应地填充空间，因为每个 li 的大小不同。我设置了这些变量来获取每个 li 的宽度，但我不知道如何将每个 li 的总宽度加在一起。

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

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

之后的 div 只是一个测试，以检查其是否获得正确的宽度。我如何将每个 li 的总宽度相加？谢谢！

Answer 1

只需width在每个函数之外定义变量并在每次调用时更新它：

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

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

仅供参考，这是由于 javascript 闭包而起作用的。看一下这个问题以获得解释：JavaScript 闭包是如何工作的？

Answer 2

在你的情况下是局部变量。所以宽度不会更新

var width  = 0;

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

});