如何使用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抓住了我的臨床失明... =）