如何使 jQuery 函数迭代从同一类中的 2 个列表中获取的单独数组？

Posted 2023-05-09

【中文标题】如何使 jQuery 函数迭代从同一类中的 2 个列表中获取的单独数组？

【英文标题】：How can I make a jQuery function iterate over separate arrays taken from 2 lists in the same class?

【发布时间】：2019-12-11 11:32:58

【问题描述】：

非常抱歉，如果标题令人困惑，我对 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 的了解还不够，无法弄清楚我需要用什么来替换它。基本上，我该怎么做才能使从第三行中的 $("lib") 创建的数组仅限于出现在 中指定的特定“.person”元素中的“lib”实例第一行？

【问题讨论】：

请注意<h1> 是<ul> 的无效子代

【参考方案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>

【参考方案2】：

因为$(".total") 有 2 个匹配项，所以您在两个位置都得到相同的数字。

另外，这里不需要数组。它只会使代码更复杂，并且存储数据的第二个副本没有任何意义 - 现在您必须确保数组数据与 HTML 数据保持同步。相反，只需从 HTML 中获取数据。

现在，您遇到了一些 HTML 验证问题：

h1 不允许在 ul 内。 b 元素不应仅用于样式设置。

因此，您将不得不调整您的 HTML。而且，如果您交换关闭的points div 和total div，解决方案会变得更容易一些。有关详细信息，请参阅下面的 cmets：

$(".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>