通過標簽名稱獲取元素的子元素長度

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作為選擇器。

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