主页 / 问题 / 1366573
Accepted
ΝNL993
Asked:2022-05-28 06:11:52 +0000 UTC2022-05-28 06:11:52 +0000 UTC

如何使用jQuery一起计算所有元素？

  • 772

首先，我不想知道它们的长度，而是它们的总产品。我尝试通过该方法.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怎么办？如果可能，请通过添加属性来获取产品。这对我个人来说会容易得多。

javascript

1 个回答

  1. Best Answer

    我不知道“通过属性获取产品”是什么。

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

    • 1

相关问题