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个叶子，嵌套的两个叶子。这似乎是一个递归问题，但我无法思考它。

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>

Answer 2

如果不想更改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时，将类名称“leaf”添加到叶元素，然后使用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>

Answer 3

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>

计算直接儿童使用>

Answer 4

您可以使用TreeWalker api，并将<ul>中没有孩子的所有孩子加起来。

＆＃13;

const treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT
);

const result = [];

while (treeWalker.nextNode()) {
  const node = treeWalker.currentNode;

  if (node.nodeName === 'UL') {
    result.push([...node.querySelectorAll('li')].filter((node) => !node.children.length).length);
  }
};

console.log(result);

＆＃13;

<ul>
  <!-- Leaf Count 7 -->
  <li>branch 1
    <ul>
      <!-- Leaf Count 6 -->
      <li>leaf 1</li>
      <li>leaf 2</li>
      <li>branch 2
        <ul>
          <!-- Leaf Count 2 -->
          <li>leaf 1</li>
          <li>leaf 2</li>
        </ul>
      </li>
      <li>branch 3
        <ul>
          <!-- Leaf Count 2 -->
          <li>leaf 1</li>
          <li>leaf 2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>leaf 3</li>
</ul>

＆＃13;

Answer 5

你甚至可以使用它

＆＃13;

$('ul').each(function(a){
count = 0;
$(this).find('li').each(function(){
if($(this).children().length ==0){
count++;
}

});
console.log(' ul level '+a+' count : '+count);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

<强> Working Demo

在嵌套的ul结构

5 个答案: