在嵌套ul结构中查找每个父ul的叶数。
在嵌套ul结构中查找每个父ul的叶数。
提问于 2017-06-28 06:30:07
给定类似于以下html的html结构，但具有任意深度。(也就是说，它可以走得更深)。因为它具有仲裁深度，所以我更喜欢不需要向html (例如类)添加任何额外标记的解决方案。
<ul><!-- Leaf Count 3 -->
<li>branch 1
<ul><!-- Leaf Count 2 -->
<li>leaf 1</li>
<li>leaf 2</li>
</ul>
</li>
<li>leaf 3</li>
</ul>我怎么能数出每个ul的一个孩子的叶子呢？所以在这个例子中，最外层的ul有3片叶子，嵌套的1片有2片叶子。这似乎是一个递归问题，但我想不通。
回答 5
Stack Overflow用户
回答已采纳
发布于 2017-06-28 07:01:05
我认为接受的答案并不是更有效。有更简单的方法来做到这一点。
我们可以使用jquery简单选择的li:not(:has(*))。这将找到所有没有子元素(叶节点)的li元素。
使用$("#dvMain").find('ul').each，它将找到所有的ul元素，然后循环遍历它。
$(document).ready(function() {
$("#dvMain").find('ul').each(function(item) {
console.log($(this).find('li:not(:has(*))').length);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dvMain">
<ul><!-- Leaf Count 4 -->
<li>branch 1
<ul><!-- Leaf Count 2 -->
<li>leaf 1</li>
<li>leaf 2</li>
</ul>
</li>
<li>branch 1
<ul><!-- Leaf Count 1 -->
<li>leaf 1</li>
</ul>
</li>
<li>leaf 3</li>
</ul>
</div>
Stack Overflow用户
发布于 2017-06-28 06:38:48
如果倾向于不更改HTML，则可以使用jQuery的filter：
function filterLeaf(ele) {
if ($(ele).children().length === 0) {
return true;
}
return false;
}
var nouter = $('#outer').find('li').filter(function() {
return filterLeaf(this);
}).length;
var ninner = $('#inner').find('li').filter(function() {
return filterLeaf(this);
}).length;
console.log(nouter);
console.log(ninner);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="outer"><!-- Leaf Count 3 -->
<li>branch 1
<ul id="inner"><!-- Leaf Count 2 -->
<li>leaf 1</li>
<li>leaf 2</li>
</ul>
</li>
<li>leaf 3</li>
</ul>
或者，在生成HTML时，将类名如“叶子”添加到叶元素中，然后使用jQuery的.find
var nouter = $('#outer').find('.leaf').length;
var ninner = $('#inner').find('.leaf').length;
console.log(nouter);
console.log(ninner);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="outer"><!-- Leaf Count 3 -->
<li>branch 1
<ul id="inner"><!-- Leaf Count 2 -->
<li class="leaf">leaf 1</li>
<li class="leaf">leaf 2</li>
</ul>
</li>
<li class="leaf">leaf 3</li>
</ul>
Stack Overflow用户
发布于 2017-06-28 06:35:33
console.log($("ul.outer>li").length)
console.log($("ul.inner>li").length)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='outer'><!-- Leaf Count 3 -->
<li>branch 1
<ul class="inner"><!-- Leaf Count 2 -->
<li>leaf 1</li>
<li>leaf 2</li>
</ul>
</li>
<li>leaf 3</li>
</ul>
- 要计算直接子级使用
>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44795129
复制相关文章
相似问题
腾讯云开发者
