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

Question

Very sorry if the title is confusing, I'm very new to Javascript/jQuery and I don't really have the terminology down yet. I'm in charge of a gaming group and trying to keep track of how many points each member racks up. For simplicity, I'm just using two lists for now, one for Suzy's points and one for Billy's points.

I currently have a function that adds up the points (it takes any bolded text that's contained in an HTML list item and sums the values) and returns the total sum in a designated div under each list. The problem is that it's returning the sum of ALL the points (in both lists), instead of the points for that individual 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> 

I understand what's going wrong with the code, I just don't know enough about jQuery to figure out what I need to replace it with. Basically, how do I make it so that the array created from $("li b") in the third line is limited to the instances of "li b" that occur within the particular ".person" element specified in the first line ?

Answer 1

You need to use $(this) to refer to the .person you're looping over. So for example, instead of $("li b").each use $(this).find("li b").each . Same logic for the placement of the total calculation:

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

Your getting the same number in both spots because $(".total") has 2 matches.

Also, there is no need for an array here. It just makes the code more complicated and it doesn't make any sense to store a second copy of the data - now you have to make sure that the array data stays in sync with the HTML data. Instead, just get the data from the HTML.

Now, you've got some HTML validation issues:

• An h1 isn't allowed inside of a ul .
• The b element shouldn't be used solely for styling.

So, you're going to have to adjust your HTML. And, if you swap the closing points div and the total div , the solution gets a little easier. See the comments below for details:

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