通过标签名称获取元素的子元素的长度
我正在尝试在列表下的列表中获取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 li
select器的子元素。 这是不可能的,因为它们只能是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>