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关闭。请查看此问题以获得解释：How do JavaScript closures work?

Answer 2

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

var width  = 0;

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

});

获取列表项总宽度

2 个答案: