查找嵌套的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

和用於：

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

深度將是2

如果在沒有ul或ol日e DOM然後深度爲0

Answer 1

通過li的只是循環，沒有一個ul或ol作爲一個孩子，發現要麼是一個其父母的數組的長度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

：請參見下面的代碼

所有鋰的名單沒有這樣的UL/OL在DOM

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

兒童每個li的深度由ul/ol過濾的陣列

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

從深度的陣列

最大值

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>