可解决的问题:获取某一个元素节点下的子元素的最大深度。
废话不多说,直接代码,兼容所有浏览器:
代码段
function getEleDeep($element) { var map = function map(cb) { return function(arr) { return Array.prototype.map.call(arr, cb); }; }; var max = function max(arr) { return arr.reduce(function(acc, cur) { if (cur >= acc) return cur; else return acc; }, arr[0]); }; // 递归函数 var nextChildren = function nextChildren(node) { // 基准条件 if (node.children.length === 0) return 1; else { // 求子节点们的长度 并取最大值 var deeps = map(nextChildren)(node.children); return 1 + max(deeps); } }; // 计算
var $ele = $element;var deep = nextChildren($ele);return deep;}//var $ele = $element[0];
具体用法:
<html lang="en"> <body> <div id="root"> <div > <div> <div> <div> <div> </div> </div> </div> </div> </div> </div> <script> var domRoot=document.getElementById("root"); alert(getEleDeep(domRoot)) function getEleDeep($element) { // map(e => e + 1)([0, 1, 2]) // => 1, 2, 3 // 类似于数组的map方法 不过这里颗粒化了 var map = function map(cb) { return function(arr) { return Array.prototype.map.call(arr, cb); }; }; var max = function max(arr) { return arr.reduce(function(acc, cur) { if (cur >= acc) return cur; else return acc; }, arr[0]); }; // 递归函数 var nextChildren = function nextChildren(node) { // 基准条件 if (node.children.length === 0) return 1; else { // 求子节点们的长度 并取最大值 var deeps = map(nextChildren)(node.children); return 1 + max(deeps); } }; // 计算 var $ele = $element; var deep = nextChildren($ele); return deep; } </script> </body> </html>
参考自https://segmentfault.com/q/1010000009620166?sort=created:
function getEleDeep($element){ // map(e => e + 1)([0, 1, 2]) // => 1, 2, 3 // 类似于数组的map方法 不过这里颗粒化了 var map = cb => arr => Array.prototype.map.call(arr, cb); // 递归函数 var nextChildren = node => { // 基准条件 if (node.children.length === 0) return 1; else { // 求子节点们的长度 并取最大值 var deeps = map(nextChildren)(node.children); return 1 + max(deeps); } } // 计算 var $ele =$element[0]; var deep = nextChildren($ele); return deep; }
但是这种方式并不兼容IE.