Question

我的ul元素包含每个li元素中的值。我想将每个li值添加到下一个li元素值并显示总和。

<ul class=`sum`>
<li>7</li>
<li>6</li>
<li>9</li>
</ul>

怎么做？

Answer 1

您可以通过获取<ul>元素的每个子元素的innerHTML来添加它们。 jQuery提供children（）来获取根节点的子节点。

＆＃13;

function getSum() {
  var total = 0;
  $('.sum').children().each(function(index, value) {
    total += parseInt(value.innerHTML.trim(), 10);
  });
  return total;
}

var total = getSum();
console.log(total);
alert("The total is " + total);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<ul class="sum">
<li>7</li>
<li>6</li>
<li>9</li>
</ul>

＆＃13;

Answer 2

var li = $('.sum li').map(function() {


  return $(this).text()
}).get().reduce(function(a, b) {
  return parseInt(a) + parseInt(b);
}, 0);

console.log(li)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class=sum>
  <li>7</li>
  <li>6</li>
  <li>9</li>
</ul>

使用这种方式

Answer 3

＆＃13;

var li = $('.sum li').map(function() {


  return $(this).text()
}).get().reduce(function(a, b) {
  return parseInt(a) + parseInt(b);
}, 0);

console.log(li);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sum">
  <li>7</li>
  <li>6</li>
  <li>9</li>
</ul>

＆＃13;

如何使用下一个</li> <li>元素在<li>元素中添加每个值？

3 个答案: