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