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