递归函数查找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

Thanks in advance.

- Tarak

---

我认为你需要“第一级子元素”。请看下面的答案。 - Sahal

为了明确，我们在这里是指DOM节点还是一些任意的树形结构？ - georg

不，这不是DOM节点。这是一些任意的JSON数据，我需要解析它。 - Tarak

能否提供一些示例数据让我们进行测试？ - georg

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

- Prinzhorn

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

示例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中的例子。

- Minko Gechev

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;等类似的代码。
再次强调，这只是我脑海中的想法，所以这段代码可能需要一些微调，但我希望它能够帮助你顺利完成任务。

- Elias Van Ootegem

Answer 4

使用 jquery 插件

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

如果必须使用 .children()，则如下所示：

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

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

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

- Sahal