javascript - 在javascript中查找子项计数的递归函数

Question

如何找出 JSON 对象中每个根节点 P 的子节点总数。这不是 DOM 结构。考虑 P2 的孩子也是 P1 的孩子，因为 P2 是 P1 的孩子。

P1-|-C1            (P1 children count 3)
   |-C2
   |-P2-|-C1       (P2 children count 5)
        |-C2
        |-P3-|-C1  (P3 children count 2)
             |-C2
        |-C3
        |-C4
        |-P4-|-C1   (P4 children count 2)
             |-C2

提前致谢。

Answer 1

没有任何库或自定义代码，它相当简单。

//Or whatever way you want to grab a reference to the DOM node
var p1 = document.getElementById('P1');

p1.getElementsByTagName('*').length

也许我误解了这个问题。这是你想要的吗？：

p1.childNodes.length

Answer 2

以下是使用递归深度优先搜索的方法：

function dfs(current, result) {
  var children = current.getChildren(),
      forEach = Array.prototype.forEach;
  result = result || {};
  result[current.id] = result[current.id] || 0;
  forEach.call(children, function (c) {
    result[current.id] += 1;
    dfs(c, result);
  });
  return result;
}
var result = dfs(document.getElementById('p1'));

console.log(result);

该脚本使用纯 JavaScript。

示例 HTML：

<div id="p1">
  <div id="p2">
    <div id="p5"></div>
    <div id="p6"></div>
  </div>
  <div id="p3">
    <div id="p7"></div>
    <div id="p8"></div>
    <div id="p9"></div>
    <div id="p10">
        <div id="p11"></div>
    </div>
  </div>
  <div id="p4"></div>
</div>

result包含：

p1: 3
p2: 2
p3: 4
p4: 0
p5: 0
p6: 0
p7: 0
p8: 0
p9: 0
p10: 1
p11: 0

请注意，您必须拥有id每个元素，否则您将得到如下结果：

undefined: 15
p1: 5
...

这是jsfiddle中的一个示例。

Answer 3

这是一个小递归函数，虽然我不知道......

function recChildCount(node, level)
{
    level = (level || 0)++;
    var tree = {},
    i = 0;
    tree['level' + level] = {count: node.childNodes.length,
                             children: []};
    if (node.hasChildNodes() === false)
    {//dead end
        return tree;
    }
    for (i; i < node.childNodes.length; i++)
    {
        tree['level' + level].children.push(recChildCount(node.childNodes[i],level));
    }
    return tree;
}

这应该按照以下方式返回一个对象：

{level1: {count: 123,
          level2: { count: 12,
                    children: [level3: { count: 16,
                                        children:[{level4:{count: 0,
                                                          children:[]},
                                                  {level4: {count: 0,
                                                            children:[]}]
                                        }
                               ]
                   }
           }
 }

或者类似的东西，当然，你可以delete tree.children;在没有孩子的时候添加一个。
再说一次，这只是我的想法，所以这段代码可能需要一些微调，但我希望它足以帮助你

Answer 4

使用jquery插件

您可以.length只使用后代选择器，如下所示：

如果你必须使用.children()，那么它是这样的：

var count = $("#yourId").children().length;

你只想要第一级，所以使用

$('#yourId > *').children().length;