如何使jQuery函數遍歷從同一類的2個列表獲取的單獨數組中？

Question

非常抱歉，如果標題令人困惑，我是Javascript / jQuery的新手，並且我還沒有真正的術語。 我負責一個游戲小組，並試圖跟蹤每個成員的得分。 為了簡單起見，我現在僅使用兩個列表，一個用於Suzy的積分，另一個用於Billy的積分。

我目前有一個將這些點加起來的函數（它接受HTML列表項中包含的任何加粗文本並對其值求和），並在每個列表下的指定div中返回總和。 問題在於，它返回的是所有點（在兩個列表中）的總和，而不是該個人的點數。

 $(".person").each(function() { var arr = []; $("li b").each(function() { arr.push($(this).text()); }) var total = 0; for (var i = 0; i < arr.length; i++) { total += arr[i] << 0; } $(".total").text("Total: " + total); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="member"> <div class="points"> <ul class="person" id="suzy"> <h1>Suzy</h1> <li><b>40</b> points</li> <li><b>50</b> points</li> </ul> </div> <div class="total" style="background:orange"></div> </div> <div class="member"> <div class="points"> <ul class="person" id="billy"> <h1>Billy</h1> <li><b>10</b> points</li> <li><b>20</b> points</li> </ul> </div> <div class="total" style="background:orange"></div> </div> 

我了解代碼出了什么問題，我只是對jQuery不夠了解，無法弄清楚我需要用什么替換它。 基本上，如何使第三行中由$（“ li b”）創建的數組限於出現在第一行中指定的特定“ .person”元素內的 “ li b”實例？

Answer 1

您需要使用$(this)來引用要遍歷的.person 。 因此，例如，代替$("li b").each使用$(this).find("li b").each 。 放置total計算的邏輯相同：

 $(".person").each(function() { var arr = []; $(this).find("li b").each(function() { arr.push($(this).text()); }) var total = 0; for (var i = 0; i < arr.length; i++) { total += arr[i] << 0; } $(this).closest('.member').find(".total").text("Total: " + total); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="member"> <div class="points"> <ul class="person" id="suzy"> <h1>Suzy</h1> <li><b>40</b> points</li> <li><b>50</b> points</li> </ul> </div> <div class="total" style="background:orange"></div> </div> <div class="member"> <div class="points"> <ul class="person" id="billy"> <h1>Billy</h1> <li><b>10</b> points</li> <li><b>20</b> points</li> </ul> </div> <div class="total" style="background:orange"></div> </div> 

Answer 2

因為$(".total")有2個匹配項，所以在兩個位置上得到的數字相同。

另外，這里不需要數組。 這只會使代碼變得更加復雜，而存儲數據的第二個副本則沒有任何意義-現在您必須確保數組數據與HTML數據保持同步。 相反，只需從HTML獲取數據即可。

現在，您遇到了一些HTML驗證問題：

• 不允許在ul內部使用h1 。
• b元素不應僅用於樣式。

因此，您將不得不調整HTML。 而且，如果交換關閉points div和total div ，則解決方案會更容易一些。 有關詳細信息，請參見以下評論：

 $(".person").each(function(){ var total = 0; // Loop over only the points for the current person, not all the points // The second argument passed to JQuery provides context for where to // limit the first argument query. "this" refers to the current person // that the loop is iterating over, so you only are adding up one person's // points, not both. $("span.points", this).each(function(){ // No JQuery needed here. Just convert the text of "this", which now (because // we are in a different loop) points to the span that we're looping over, // to a number and add it to the total total += +this.textContent; }); // No JQuery needed here either. Just set the text of the next sibling of // the person we were looping over (now the total div) to the total. this.nextElementSibling.textContent = "Total: " + total; }); 

 /* Do styling with CSS classes rather than inline styles */ li span.points { font-weight:bold; } .total {background:orange; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="member"> <div class="points"> <h1>Suzy</h1> <ul class="person"> <li><span class="points">40</span> points</li> <li><span class="points">50</span> points</li> </ul> <div class="total"></div> </div> </div> <div class="member"> <div class="points"> <h1>Billy</h1> <ul class="person"> <li><span class="points">10</span> points</li> <li><span class="points">20</span> points</li> </ul> <div class="total"></div> </div> </div>