如何使用jQuery在for循环的迭代中不断添加变量？

Question

我正在尝试将 jQuery (1.4.2) 中 for 循环的每次迭代中的数字增加前一个元素的宽度。

我尝试了以下方法：

var
$lis = $('#bookmarks > li'),
liHeight = parseInt($lis.height()),
numLis = $lis.length;
console.log(numLis);

var totalLeft = '0';
console.log(totalLeft);

for (i=1; i<numLis; i++) {
    var leftOffset = $lis.eq(i-1).width();
    var leftTotal = leftOffset + leftTotal;


    console.log(leftOffset +"/"+ leftTotal);
}

本节的输出是：

11 (the length of the array)
0 (the initial value of 'totalLeft')
97/97
117/214
90/
115/NaN
101/NaN
138/NaN
93/NaN
96/NaN
102/NaN
80/NaN

我尝试在var leftTotal = leftOffset + leftTotal; 变量赋值中使用parseInt() 左右一个和两个变量，但无济于事。我也尝试过使用 jQuery 的each()，结果完全相同。这并不奇怪，因为我以几乎完全相同的方式分配值......

这里有两个问题：

1. 为什么leftTotal 不是数字 (NaN)？
2. 如何将leftOffset 的新 值添加到上一次迭代的leftOffset 值中？

控制台日志应该如下所示：

11
0
97/97
117/214
90/304
115/419
101/520
138/658
93/751
96/847
102/949
80/1029

---

编辑回应@KennyTM：

Console.log 输出现在（更有希望）：

11
0
97 "/" "970"
117 "/" "117970"
90 "/" "90117970"
115 "/" "11590117970"
101 "/" "10111590117970"
138 "/" "13810111590117970"
93 "/" "9313810111590117970"
96 "/" "969313810111590117970"
102 "/" "102969313810111590117970"
80 "/" "80102969313810111590117970"

关于@Tomalak：是的，这是一个错字。可悲的是，这在我的代码和真正的脚本中都是一个错字。 ......叹气......不过，感谢您的收获，这似乎帮了很多忙。

...多么尴尬。 =)

Answer 1

我会尝试这样的：

var leftTotal = 0
$('#bookmarks > li').each( function(){ 
    leftTotal += parseInt(this.width());  // just to be sure its an int :) 
    console.log(this.width(); +"/"+ leftTotal);
});

Answer 2

您的代码中似乎没有分配给totalLeft。

另外，我认为您的代码方式 很复杂并且有细微的错误。这是一个更紧凑和 jQuery 风格的版本。

var totalLeft = 0;

$('#bookmarks > li:gt(0)').prev().each(function () {
    totalLeft += $(this).width();
});

至少，这会生成与the code in your own answer 相同的数字。

Answer 3

看来您没有为下一次迭代保留最后一个值。即 - 将“var leftTotal”置于循环之外，这样它将保留下一次迭代的值，您将添加到它。

希望我没听错:)

Answer 4

var totalLeft = 0;
console.log(totalLeft);

for (i=1; i<numLis; i++) {
    var leftOffset = $lis.eq(i-1).width();
    var leftTotal = parseInt(leftOffset,10) + totalLeft;


    console.log(leftOffset +"/"+ leftTotal);
}

Answer 5

显然，解决方案是更加注意变量名，并使用 parseInt：

var
$lis = $('#bookmarks > li'),
liHeight = parseInt($lis.height()),
numLis = $lis.length;
console.log(numLis);

var leftTotal = '0';    // somehow, between creating this var and the loop I started calling it something else 'totalLeft', for no known reason.
console.log(leftTotal);

for (i=1; i<numLis; i++) {
    var leftOffset = $lis.eq(i-1).width();
    var leftTotal = leftOffset + parseInt(leftTotal);   // added the parseInt here to force it to be a number.      

    console.log(leftOffset, "/" , leftTotal);
}

感谢@Tomalak 发现了我的临床失明... =)