ネストされたul/olタグの深さを見つける

Question

DOMツリーが与えられたら、ネストされたul/olタグの最大深度を見つける必要があります。例えば

：

<ul> 
    <li>Item: 
    <ol> 
     <li>Point: 
     <div> 
      <ul> 
      <li>elem1</li> 
      </ul> 
     </div> 
     </li> 
    </ol> 
    </li> 
    <li>elem2</li> 
</ul> 
<ul> 
    <li>simple list1</li> 
</ul> 
<ul> 
</ul> 

深さは3

であろうとのために：にはul又はolがない場合

<ol> 
    <li> 
    <ol> 
     <li></li> 
    </ol> 
    </li> 
</ol> 

深さは2

あろうth e DOMの場合、深さは0

Answer 1

子として ulまたは olを持っており、どちらかであるその親の配列の長さを見つけることができません li年代を通じて

だけループulまたはolです。

var l, depth = 0; 
 
$('li:not(:has(ol)):not(:has(ul))').each(function() { 
 
    l = $(this).parents('ul,ol').length; 
 
    if (l > depth) 
 
    depth = l; 
 
}); 
 
console.log("Depth : ", depth);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li>Item: 
 
    <ol> 
 
     <li>Point: 
 
     <div> 
 
      <ul> 
 
      <li>elem1</li> 
 
      </ul> 
 
     </div> 
 
     </li> 
 
    </ol> 
 
    </li> 
 
    <li>elem2</li> 
 
</ul> 
 
<ul> 
 
    <li>simple list1</li> 
 
</ul> 
 
<ul> 
 
</ul>

Answer 2

どのようにノードをトラバースするのですか？

var max = 0, 
    lists = $('li'); 

for(item in lists) 
{ 
    var len = $(lists[item]).parents('ul,ol').length; 
    if (len > max) max = len; 
} 
alert(max); 

は、ここではこの動作を参照： http://jsbin.com/cufakabuni/

Answer 3

あなたは、各li要素に親配列への呼び出しを行うと、結果の配列があるどのくらいかを確認することができます。以下を参照してくださいコード：

function finddepth() { 
 
maxdepth = 0 
 
$('li').each(function(li) { 
 
    \t var parentArray = []; 
 
    var sParents = $(this).parents("ul, ol").map(function() {     
 
     parentArray.push(this.tagName); 
 
    }) 
 
    var depth = parentArray.length; 
 
    if (depth > maxdepth) { maxdepth = depth }; 
 
})//foreach 
 

 
alert(maxdepth) 
 
} 
 

 
finddepth()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<ul> 
 
    <li>Item: 
 
    <ol> 
 
     <li>Point: 
 
     <div> 
 
      <ul> 
 
      <li>elem1</li> 
 
      </ul> 
 
     </div> 
 
     </li> 
 
    </ol> 
 
    </li> 
 
    <li>elem2</li> 
 
</ul> 
 
<ul> 
 
    <li>simple list1</li> 
 
</ul> 
 
<ul> 
 
</ul>

Answer 4

プレビューソリューションに基づいて、すべてのLi

リストはありませんUL /オールDOM

$('li:not(:has(ol)):not(:has(ul))') 

上の子供各liの深さがul/olでフィルタリングされた配列

深さのアレイから

最大値

Math.max.apply(null, $('li:not(:has(ol)):not(:has(ul))').map(function() { return ($(this).parents('ul,ol').length || 0) })) 

（シンプルでクリーンな）全ソリューション：

function depth() { 
    return (Math.max.apply(null, $('li:not(:has(ol)):not(:has(ul))').map(function() { return ($(this).parents('ul,ol').length || 0) }))) 
} 

Answer 5

私は少し遅れていますが、私は何とか私たちは子要素を反復処理する必要があることがわかりましたページ内で最も深いリスト項目を見つけてから、そこから特定の要素レベルの深みを数えることができます。あなたがul,olの内側とだけこれらのタグに基づいてリスト要素がどのように深く見たい場合などこの場合

：

function count(el, elm, log) { 
 
    log($(el).find('li:not(:has(' + elm + '))').parents(elm).length || 0); 
 
} 
 

 
function log(depth) { 
 
    console.log(depth); 
 
} 
 

 
$(document.body).children(':not(script)').each(function() { 
 
    count($(this), 'ul,ol', log); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>Item:<ol><li>Point:<div> 
 
      <ul><li>elem1</li></ul> 
 
     </div></li></ol> 
 
    </li> 
 
    <li>elem2</li> 
 
</ul> 
 
<ul> 
 
    <li>simple list1</li> 
 
</ul> 
 
<ul> 
 
</ul> 
 
<ol> 
 
    <li> 
 
    <ol> 
 
     <li></li> 
 
    </ol> 
 
    </li> 
 
</ol>