Как я могу выбрать все LIS, а затем добавить все его номера вместе?

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> 

Я хочу выбрать все ли и добавить все их номера вместе я хочу выбрать все ли и добавить все их номера вместе

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

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

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

Answer 4

Используйте NodeList для итерации, используя getElementsByTagName():

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

Итерируйте по списку так же, как по массиву.