jQuery擷取c:foreach的資料隻能擷取第一條

我在做項目的時候，出現的問題是：購物商場總是擷取第一件商品，其後的商品就不能擷取了。

還有的是jQuery擷取數值計算後顯示結果為NAN，解決在此連結裡：

https://blog.csdn.net/qq_39625703/article/details/101679164

顯示頁面結果隻能顯示第一條資料。

html代碼：

下面是jQuery代碼：

<script type="text/javascript">
//計算數量方法
function totalNum(){
         var sumNum = 0;
         $("#buyNum").each(function () {
        	 sumNum += parseInt($(this).text());
         });
         $(".cartSumNumber").text(sumNum);
}
//計算總價方法
function totalPrice(){
	//計算總價，編寫總價方法
         var zong = 0;
         $("#cartPrice").each(function () {
        	 zong += parseInt($(this).text()); 
         });
         $(".Sum").text(zong);
}
//加載頁面時，調用總價方法
$(function(){
	 totalNum();
	 totalPrice();	//調用總價方法
});
</script>	           

我發現，我的jQuery擷取錯了，不應該是擷取id。因為我的是循環出來後，有很多相同的元素。

1. ID選擇器使用ID來選擇元素，例： $("#buyNum").each(...){...} ，當隻需要選擇一個元素時，使用ID選擇器。
2. class選擇器使用CSS class 來選擇元素，例：$(".buyNum").each(...){...} ，如果需要選擇具有相同 CSS class的元素，就要用class 選擇器。

解決方法：

1.把 #buyNum改成 .buyNum （這種簡單點）

function totalNum(){
         var sumNum = 0;
         $(".buyNum").each(function () {
        	 sumNum += parseInt($(this).text());
         });
         $(".cartSumNumber").text(sumNum);
}
function totalPrice(){
         var zong = 0;
         $(".cartPrice").each(function () {
        	 zong += parseInt($(this).text()); 
         });
         $(".SumPrice").text(zong);
}           

2. 也可改成這樣：

function totalNum(){
         var sumNum = 0;
         $("span[id='buyNum']").each(function () {
        	 sumNum += parseInt($(this).text());
         });
         $(".cartSumNumber").text(sumNum);
}
function totalPrice(){
         var zong = 0;
         $("span[id='cartPrice']").each(function () {
        	 zong += parseInt($(this).text()); 
         });
         $(".SumPrice").text(zong);
}           

正常顯示結果如圖：