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

我正在尝试在列表下的列表中获取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个孩子吗? 我错过了什么?

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

要解决这个问题,我build议你使用find()来代替。 如果你只特别想要li元素的第一级,你可以使用> ul > li作为select器。

 $(`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>