Jquery的每一個功能不包括最後的「每個」

Question

這裏是codepen這將使這是一個容易得多：http://codepen.io/kaisle/pen/rLqEXY

長話短說：點擊「+」按鈕，使用的產品之一。 「當前訂單」框現在顯示具有該風味的清單項目，您選擇的數量以及總價格。現在的訂單div上顯示的「訂單總額」會在您點擊批發訂單項目的價格時進行調整。 問題在於每個類別中的最後一個項目未包含在總價格中。

要測試這個：點擊'+'一次爲'工藝蘇打-10mg THC /罐'中的每種口味。 「訂單總額」應該是180美元（每次5美元36美元）。但是，「訂單總額」顯示144美元（前四種口味包括在內，而最後的五種口味不包括在內）。下面是生成列表項的.each代碼。

$('.picker .product.hardcandy .qty').each(function(i, e) { 
     var $this = $(this); 
     var orderAmt = parseInt($this.find('.amt').html()); 
     var itemPrice = orderAmt*($(this).siblings('.wholesale-pricing').children('.priceper').html()); 


     if (orderAmt > 0) { 
      chosenHardCandy += '<li>' + orderAmt + ' x ' + $this.find('.flavor').html() + ' Hard Candy - $' + '<span class="newPriceHardCandy">' + itemPrice + '</span></li>'; 
     } 

    var sum = 0; 

    $('.newPriceHardCandy').each(function(){ 
     sum += parseFloat($(this).text()); 
    });  

    $('.indTotalHardCandy').html(sum); 
     $('.currentorder .chosen.hardcandy').html(chosenHardCandy); 
}); 

東西在下面的代碼（我相信）是它打破。以下代碼的要點：如果訂單金額至少爲1，則在此列表中添加一個新的清單項目，例如：'3 x Root Beer Hard Candy - $ 540'。然後取總和（在本例中540），將其添加到其他列表項的其他款項，並輸出總

if (orderAmt > 0) { 
     chosenHardCandy += '<li>' + orderAmt + ' x ' + $this.find('.flavor').html() + ' Hard Candy - $' + '<span class="newPriceHardCandy">' + itemPrice + '</span></li>'; 
} 

      var sum = 0; 
$('.newPriceHardCandy').each(function(){ 
    sum += parseFloat($(this).text()); 
}); 

我想我只是跳繩簡單的東西。我發現在每個項目的末尾添加一個空的產品風味線的快速修復，但這似乎是一個可能錯誤的解決方案，可能與我的jquery錯誤。

Answer 1

問題是，您正在計算基於DOM中不存在的元素的總和。

當前，您首先創建了一個字符串的HTML .newPriceHardCandy元素在變量chosenHardCandy。然後，您嘗試使用$('.newPriceHardCandy').each()對這些進行求和，但選擇DOM中已有的元素，而不是字符串中的元素。然後後您使用$('.currentorder .chosen.hardcandy').html(chosenHardCandy);

添加實際元素到DOM您需要更改代碼的順序，以先添加HTML DOM的是字符串，然後工作出來的總和。

此外，還有沒有必要繼續重新計算外.each()語句中的總和，但事實上，你現在要做的就是爲什麼你除了最後一個項目的一切的總和：由當時的最後一次迭代中運行你已更新了DOM與所有以前的項目，所以總和代碼找到這些，它只是沒有找到最後一個只存在於該點的字符串變量。

因此，嘗試這樣的事：

// FIRST build a string of elements to total 
$('.picker .product.hardcandy .qty').each(function(i, e) { 
    var $this = $(this); 
    var orderAmt = parseInt($this.find('.amt').html()); 
    var itemPrice = orderAmt * ($(this).siblings('.wholesale-pricing').children('.priceper').html()); 

    if (orderAmt > 0) { 
    chosenHardCandy += '<li>' + orderAmt + ' x ' + $this.find('.flavor').html() + ' Hard Candy - $' + '<span class="newPriceHardCandy">' + itemPrice + '</span></li>'; 
    } 
}); 
// SECOND add the string to the DOM 
$('.currentorder .chosen.hardcandy').html(chosenHardCandy); 

// FINALLY calculate the sum 
var sum = 0; 
$('.newPriceHardCandy').each(function() { 
    sum += parseFloat($(this).text()); 
}); 
$('.indTotalHardCandy').html(sum); 

這是你的演示的一個分支版本作出修改：http://codepen.io/anon/pen/rLqXGA - 請注意：我也點擊了「整潔JS」選項，然後我修補程序應用只有到代碼的硬糖部分 - 您需要爲蘇打水等等做同樣的事情。