javascript - 如何在 javascript 中对所有 child 的属性求和?

标签 javascript jquery dom

我有一个看起来像的递归 DOM 树

<li data-count="3">
  <li data-count="3">
    <li data-count="3">
      <li data-count="2">
      </li>
      <li data-count="1">
      </li>
    </li>
  </li>
</li>

这个 DOM 树不是按原样给出的。最初,我只有“离开”时的数据计数 <li>元素。他们的 parent 没有那个属性。我想将它们添加到每个级别的 parent 。

我已经想出了遍历算法,如下所示:

function count(node) {
  if (!node.hasClass('leaf')) {
    node.children('li').each(function() {
      count($(this));
    }
    node.attr("data-count") = sum(node.children('li').attr("data-count"));
  }
}

但是,我对 javascript 或 jquery 不太熟悉,所以我坚持使用这种语法:

node.attr("data-count") = sum(node.children('li').attr("data-count"));

谁能帮我修正这个短语?

最佳答案

您需要使用parseInt(),否则js会将var解析为string

  var sum = 0;
  $( "li" ).each(function() {
  sum += parseInt($(this).attr( "data-count" ));
  });

  alert(sum) ;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li data-count="3">
  <li data-count="3">
    <li data-count="3">
      <li data-count="2">
      </li>
      <li data-count="1">
      </li>
    </li>
  </li>
</li>

关于javascript - 如何在 javascript 中对所有 child 的属性求和?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33091866/

相关文章:

javascript - 如何根据动态选择框中的行显示生成的选择选项

javascript - DOM 创建元素上的 jQuery .on() 函数问题

jquery - 使用带 JQuery 可拖动的内联 block 时,如何阻止列表项跳转?

javascript - 当脚本类型设置为 "application/javascript"时,AJAX 的 JS 组件不起作用

javascript - AngularJS 通过操作 $locale 来更改货币显示

javascript - 分页加载按钮的 onclick 未触发

javascript - JavaScript 和 ActionScript 中 "this"的区别

javascript - 带画廊的多个模态与单个动态模态

javascript - "$(document).on"在 event.stopPropagation 之后不触发和 "$(a).on"不触发新元素

javascript - 这是有效的 JSON 吗?