Как посчитать все элементы вместе с помощью jQuery?

В первую очередь я не хочу узнать их длину(length), а их общее произведение. Я пробовал через метод .find(), это вообще ломало весь скрипт.

HTML:

<html>
 <head>
  <title>Count Total Sum</title>
 </head>
 <body style="background: white;">
  <h2>Example Title</h2>
  <div class="content">
   <section id="sec1">
    <ol id="posts" class="list full-list">
     <li data-total-views="4">
      <h4>Post Title 1</h4>
      <br> <p>Blah blah blah.</p>
      <dl>
       <dt class="info-views"><span>Views:</span></dd>
       <dd class="info-views"><span>4</span></dd>
      </dl>
     </li>
     <li data-total-views="7">
      <h4>Post Title 2</h4>
      <br> <p>Blah blah blah.</p>
      <dl>
       <dt class="info-views"><span>Views:</span></dd>
       <dd class="info-views"><span>7</span></dd>
      </dl>
     </li>
     <li data-total-views="12">
      <h4>Post Title 3</h4>
      <br> <p>Blah blah blah.</p>
      <dl>
       <dt class="info-views"><span>Views:</span></dd>
       <dd class="info-views"><span>12</span></dd>
      </dl>
     </li>
    </ol>
   </section>
  </div>
 </body>
</html>

И jQuery:

$('dd.info-views span:first').blur(function () {
    let sum = 0;
    $('dd.info-views span:first').each(function() {
        sum += Number($(this).val());
    });
});

В конечном итоге результат был undefined, что делать? Если возможно то, пожалуйста, получите произведение с помощью сложения атрибутов т.к. так будет намного легче лично для меня.


Ответы (1 шт):

Автор решения: Igor

Я не знаю, что такое "получите произведение через атрибут".

$(function() {
  let sum = 0;
  $('dd.info-views span').each(function() {
    sum += Number($(this).text());
  });
  console.log(sum);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <section id="sec1">
    <ol id="posts" class="list full-list">
      <li data-total-views="4">
        <h4>Post Title 1</h4>
        <br>
        <p>Blah blah blah.</p>
        <dl>
          <dt class="info-views"><span>Views:</span></dd>
       <dd class="info-views"><span>4</span></dd>
      </dl>
     </li>
     <li data-total-views="7">
      <h4>Post Title 2</h4>
      <br> <p>Blah blah blah.</p>
      <dl>
       <dt class="info-views"><span>Views:</span></dd>
       <dd class="info-views"><span>7</span></dd>
      </dl>
     </li>
     <li data-total-views="12">
      <h4>Post Title 3</h4>
      <br> <p>Blah blah blah.</p>
      <dl>
       <dt class="info-views"><span>Views:</span></dd>
       <dd class="info-views"><span>12</span></dd>
      </dl>
     </li>
    </ol>
   </section>
  </div>

→ Ссылка