如何使用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

我试过在一个变量中使用parseInt() ，并且两个变量都在var leftTotal = leftOffset + leftTotal; 变量分配，无济于事。 我也尝试过使用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

似乎您没有为下一次迭代保留最后一个值。 即-将“ var leftTotal”放到循环外，这样它将保留下一次迭代的值，并将其添加到其中。

希望我对你:)

Answer 3

看来您没有在代码中分配totalLeft 。

另外，我觉得你的代码的方式复杂，有细微的错误。 这是一个更紧凑和jQuery风格的版本。

var totalLeft = 0;

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

至少，这会生成与您自己的answer中的代码相同的数字。

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抓住了我的临床失明... =）