如何使 jQuery 函数迭代取自同一 class 中的 2 个列表的不同数组？

Question

非常抱歉，如果标题令人困惑，我是 Javascript/jQuery 的新手，我还没有真正了解术语。我负责一个游戏小组，并试图跟踪每个成员累积了多少积分。为简单起见，我现在只使用两个列表，一个用于 Suzy 的积分，一个用于 Billy 的积分。

我目前有一个函数可以将点数相加（它采用 HTML 列表项中包含的任何粗体文本并对值求和）和 returns 指定 div 在每个列表下。问题是它返回所有点的总和（在两个列表中），而不是 dividual person.

中的点。

$(".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。因此，例如，使用 $(this).find("li b").each 而不是 $("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>

如何使 jQuery 函数迭代取自同一 class 中的 2 个列表的不同数组？

How can I make a jQuery function iterate over separate arrays taken from 2 lists in the same class?

javascript

jquery

jquery-selectors