再帰jsで最大ネスティングを見つける方法

Question

私は<div>という要素のツリーを持っています。

divの再帰を使って最大のネストを見つける必要があります。

私は今、すべてのページのためにそれを作るために助けてください最初のdiv

var body = document.querySelector('body'); 
 
var divs = body.children; 
 
var element = divs[0]; 
 

 

 
count = 0 
 
function recursion (data) {  
 
    if (data.children.length > 0) { 
 
    \t \t count++ 
 
     console.log(data.children[0]) 
 
     return recursion(data.children[0]) 
 
    } 
 
\t else { 
 
    console.log(count) 
 
    return count 
 
    } 
 
} 
 

 

 
recursion(element);

<div> 
 
    <div> 
 
     <div> 
 
      <div> 
 
       <div> 
 
        <div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div> 
 
    <div> 
 
     <div> 
 
      <div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div> 
 
     <div> 
 
      <div> 
 
       <div> 
 
        <div> 
 
         <div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div> 
 
       <div> 
 
        <div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

のためにそれを作りました。 jsfiddle

を2つにあなた

Answer 1

body要素自体を使用して要素をチェックし、max変数を使用してローカル最大深度を格納することができます。

recusion関数には、levelパラメータが必要です。これは、eveyネストされたレベルでインクリメントされます。子どもがそれ以上見つからない場合は、必要に応じてmaxが調整されます。

function recursion (data, level) { 
 
    var i; 
 
    if (data.children.length > 0) { 
 
     for (i = 0; i < data.children.length; i++) { 
 
      recursion(data.children[i], level + 1); 
 
     } 
 
    } else { 
 
     if (level > max) { 
 
      max = level; 
 
     } 
 
    } 
 
} 
 

 
var max = 0; 
 

 
recursion(document.body, 0); 
 
console.log(max);

<div><div><div><div><div><div></div></div></div></div></div></div><div><div><div><div></div></div></div><div><div><div><div><div><div></div></div></div></div><div><div><div></div></div></div></div></div></div>

レベルカウンタなし

別のアプローチ

function getDepth(data) { 
 
    return +data.children.length && (1 + Math.max.apply(Math, [].map.call(data.children, getDepth))); 
 
} 
 

 
console.log(getDepth(document.body));

<div><div><div><div><div><div></div></div></div></div></div></div><div><div><div><div></div></div></div><div><div><div><div><div><div></div></div></div></div><div><div><div></div></div></div></div></div></div>

Answer 2

スプリットこのタスクをありがとう：

• 横断ジェネリックDOM
• は、最大深さをピッキング

// traverse root and its chilren using depth first search 
 
const dfs = (root, iterator, depth = 0) => iterator(root, depth, [ 
 
    ...[].map.call(root.children, child => dfs(child, iterator, depth + 1)) 
 
]) 
 

 
// pick maximum depth 
 
const maxDepth = (_, depth, children) => 
 
    children.length ? Math.max(...children) : depth 
 

 
console.log(
 
    dfs(
 
    document.body, 
 
    maxDepth 
 
) 
 
)

<div> 
 
    <div> 
 
     <div> 
 
      <div> 
 
       <div> 
 
        <div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div> 
 
    <div> 
 
     <div> 
 
      <div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div> 
 
     <div> 
 
      <div> 
 
       <div> 
 
        <div> 
 
         <div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div> 
 
       <div> 
 
        <div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>