Question

  <div id=“container”> 
<!--i want to select all the li and the add all their numbers together -->
            <ul> 
                <li>5</li> 
                <li>10</li> 
                <li>15</li> 
                <li class="child">20</li> 
                <li>25</li> 
                <li>30</li> 
                <li>25</li> 
                <li>30</li> 
                 <li>25</li> 
                <li>30</li> 
                <li>25</li> 
                <li>30</li>
            </ul> 
    </div>

我要选择所有li，然后将所有数字加在一起我想选择所有li，然后将所有数字加在一起

Answer 1

您可以使用函数document.querySeclectorAll和函数reduce来添加值。

let result = Array.from(document.querySelectorAll('#container li')).reduce((a, {textContent}) => a + +textContent, 0);
console.log(result);

<div id="container">  <!--i want to select all the li and the add all their numbers together -->  <ul>    <li>5</li>    <li>10</li>    <li>15</li>    <li class="child">20</li>    <li>25</li>    <li>30</li>    <li>25</li>    <li>30</li>    <li>25</li>    <li>30</li>    <li>25</li>    <li>30</li>  </ul></div>

Answer 2

您可以尝试使用querySelectorAll()和forEach()

var sum = 0;
document.querySelectorAll('#container ul > li').forEach(function(el){
  sum += Number(el.textContent);
});
console.log(sum);

<div id="container"> 
  <ul> 
      <li>5</li> 
      <li>10</li> 
      <li>15</li> 
      <li class="child">20</li> 
      <li>25</li> 
      <li>30</li> 
      <li>25</li> 
      <li>30</li> 
       <li>25</li> 
      <li>30</li> 
      <li>25</li> 
      <li>30</li>
  </ul> 
</div>

Answer 3

使用NodeList通过getElementsByTagName()进行迭代：

var lis = document.getElementById("container").getElementsByTagName("li");

像遍历数组一样遍历列表。

Answer 4

let li = [...document.querySelectorAll('#container ul > li')]; //
let counter = 0; //the sum of all li

li.forEach(el => {
    counter += el.textContent * 1;
});

如何选择所有lis，然后将其所有数字相加？

4 个答案: