jQuery：计算第一层li标签的数量（不包括后代ul> li标签）

Question

HTML:

<ul id='top_nav'>
  <li><a href="">xxx</a></li>
  <li><a href="">xxx</a></li>
  <li><a href="">xxx</a></li>
  <li>
    <ul>
      <li><a href="">xxx</a></li>
      <li><a href="">xxx</a></li>
    </ul>
  </li>
  <li><a href="">xxx</a></li>
</ul>

问题:

如何获取li标签的第一级数量？在这个例子中，输出应该是5而不是7。

- MacGyver

---

输出应该是4吗？在我看来应该是5。 - user1106925

哈哈！是的，你说得对！我会编辑我的问题。之前：“4，不是6”|之后：“5，不是7”。 - Entree

Answer 1

$("#top_nav > li").size() 应该能解决问题。

这个方法的原因是，类似于 foo > bar 的选择器会选择与 bar 匹配且是 foo 的直接子元素。而 size() 函数返回选择的实体数量。

- dangerChihuahua007

---

啊，我忘记了“>”符号。谢谢！ - Entree

是的，如果没有使用 >，则会选择 top_nav 中的所有列表项，甚至不是直接子项。 - dangerChihuahua007

提醒阅读此内容的人：.size() 函数似乎是较新（性能更好）的函数..但 .length 函数支持旧版本的 jQuery..但它们的行为都相同。 - Entree

Answer 2

使用一些CSS与您的查询并使它更加容易。记住，jQuery已经完成了所有的艰苦工作，所以您不需要做太多:

$("ul li:first-child")
//  the previous simply is a call to all unordered list items that re first in the list
$("ul li:first-child").length
// the previous will get you the total count of all first list items

我刚意识到我误解了问题，实际上答案已经在那里了。

$("#top_nav > li")

- SpYk3HH

Answer 3

David和Jasper都提供了不错的选项，但你还需要过滤掉具有ul子元素的li，以便获得4作为输出：

$("#top_nav > li").filter(function() {
    return $(this).children('ul').length == 0;
}).size()​

- jhchen

---

哈哈！我会编辑我的问题...它应该是5，而不是4。我会给你加1的。眼力真好，眼力真好！ - Entree