jquery - 如何附加元素值计数

Question

我在 jquery 中收到了一个新任务。在我尝试之前，我发布了代码片段。

$(document).on("click", ".add", function (e) {
    e.preventDefault();
    $.ajax({
        url: url,
        type: "post",
        data: postdata,
        success: function (data) {
            var count = $('#counts').children('li span').length;
           
        }
    })
});

li{
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<ul class="top-ul">
<li> </li>
<li><ul class="counts">
  <li><span>5</span></li>
  <li><span>6</span></li>
  </ul></li>
<li><ul class="counts">
  <li><span>8</span></li>
  <li><span>2</span></li>
  </ul></li>
</ul>
</div>

<button class="add">
Add result
</button>
<div>
<p class="result">
</p>
</div>

之后我真的不知道该怎么办了。我的问题是

如何将所有 span 元素的值计数附加到 .class 元素(单击按钮时)。跨度元素值可能会动态变化。

提前致谢。

Answer 1

我不明白你的 ajax 调用...

无论如何，你必须先创建一个等于 0 的 total 变量，然后循环你的 span 元素并将结果添加到你的 total ...

$(document).on("click", ".add", function (e) {
    var total = 0;
    $(".counts li span").each(function(){
      total += parseInt($(this).text());
    });
    $(".result").text(total)
});

li{
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<ul class="top-ul">
<li> </li>
<li><ul class="counts">
  <li><span>5</span></li>
  <li><span>6</span></li>
  </ul></li>
<li><ul class="counts">
  <li><span>8</span></li>
  <li><span>2</span></li>
  </ul></li>
</ul>
</div>

<button class="add">
Add result
</button>
<div>
<p class="result">
</p>
</div>