javascript - 在嵌套的 ul 结构中查找每个父 ul 的叶数

Question

给定一个 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 个叶子，而嵌套的 ul 有两个叶子。这似乎是一个递归问题，但我想不通。

Answer 1

我认为接受的答案并不更有效率。有更简单的方法可以做到这一点。

我们可以使用 jquery simple selectee 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>