通过标签名称获取元素的子元素长度答案

【问题标题】：Get to length of children elements for an element by tag name通过标签名称获取元素的子元素长度
【发布时间】：2017-12-03 23:12:53
【问题描述】：

我试图在我的代码中获取 li 的长度，这是列表下的一个列表。

$(`ul.topnav > li`).each(function() {
  console.log($(this).children("ul li").length);
});

body {
  font-size: 14px;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<ul class="topnav">
  <li>Item 1
    <ul>
      <li class="topnav1">Nested item 1</li>
      <li class="topnav1">Nested item 2</li>
    </ul>
  </li>
  <li>Item 2
    <ul>
      <li class="topnav1">Nested item 1</li>
      <li class="topnav1">Nested item 2</li>
      <li class="topnav1">Nested item 3</li>
    </ul>
  </li>
  <li>Item 3
    <ul>
      <li class="topnav1">Nested item 1</li>
    </ul>
  </li>
</ul>

但长度似乎为每个元素打印 0。但是，如果我这样做：

$(`ul.topnav > li`).each(function() {
  console.log($(this).children().children().length);
});

然后打印正确，即 2,3,1。

但是我可以通过标签名找到第 n 个孩子吗？我错过了什么？

【问题讨论】：

标签： javascript jquery html node.js

【解决方案1】：

问题是因为children() 正在寻找与ul li 选择器匹配的子元素。这是不可能的，因为它们只能是 ul 元素。

要解决此问题，我建议您改用 find()。如果您只需要第一级 li 元素，您可以使用 > ul > li 作为选择器。

$(`ul.topnav > li`).each(function() {
  console.log($(this).find("ul li").length);
});

body {
  font-size: 14px;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<ul class="topnav">
  <li>Item 1
    <ul>
      <li class="topnav1">Nested item 1</li>
      <li class="topnav1">Nested item 2</li>
    </ul>
  </li>
  <li>Item 2
    <ul>
      <li class="topnav1">Nested item 1</li>
      <li class="topnav1">Nested item 2</li>
      <li class="topnav1">Nested item 3</li>
    </ul>
  </li>
  <li>Item 3
    <ul>
      <li class="topnav1">Nested item 1</li>
    </ul>
  </li>
</ul>

【讨论】：