Question

我有一个看起来像

的递归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>元素处有数据计数。他们的父母没有这个属性。我想将它们添加到每个级别的父母身上。

我已经找到了这个遍历算法，如下所示：

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"));

任何人都可以帮我解决这个短语吗？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果你想要儿童的计数：

var $parents = $('someSelector');
// loop over all parent elements needing counts
$parents.each(function () {       
    var $el = $(this),
        // get total of children `count`
        count = $el.children().get().reduce(function (total, child) {
            return total + $(child).data('count')
        }, 0);
    // set on element
    $el.data('count', count);
});

使用data()读取data-属性并在元素上设置值。当value为numeric时，它将在内部类型转换为数字

如何在javascript中汇总所有孩子的属性？

2 个答案: