按标签名称获取元素的子元素长度

Question

我想在我的代码中获取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个孩子。我缺少什么？

Answer 1

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

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

＆＃13;

＆＃13;

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

＆＃13;

body {
  font-size: 14px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;