Question

如何查找JSON对象中每个根节点P的子计数总数。 这不是一个DOM结构。考虑到P2的孩子，P1的孩子也是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 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 3

以下是使用递归Depth-first search：

执行此操作的方法

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 4

使用jquery插件

您可以将.length与后代选择器一起使用，如下所示：

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

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

您只需要第一级，因此请使用

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

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

4 个答案: