jQuery参考实例 2.1 仅选择子级元素

原文：

http://www.lifelaf.com/blog/?p=263

本文翻译自jQuery Cookbook (O’Reilly 2009) 2.1 Selecting Child Elements Only

需求

选择某元素的一个或多个子元素

解决方案

使用直级后代连接符（>），该连接符两边各需一个选择器表达式。比如，对于选择所有li对象的直级超链接子元素，我们可以使用以下选择器：li>a。这样，所有在li元素内且紧挨着li的a元素都会被选中。以下面的HTML片段为例：

<a href="/category">Category</a>
<ul id="nav">
<li><a href="#anchor1">Anchor 1</a></li>
<li><a href="#anchor2">Anchor 2</a></li>
<li><span><a href="#anchor3">Anchor 3</a></span></li>
</ul>

可以调用jQuery函数来选中每个li对象内的超链接子级元素：

jQuery('#nav li > a');
//仅选择了2个元素

#nav元素内的第三个a元素并没有被选中，因为它不是li的子级元素，而是span的子级元素。

讨论

区分子级元素和后代元素这两个概念很重要。后代元素指的是某元素内部的所有元素，而子级元素仅指其直级后代。在这里，用子女和父母的概念来作类比非常合适，因为DOM树的层级关系与其非常相似。

值得注意的是，在上下文背景参数存在的情况下，连接符>左侧的表达式可以不声明：

jQuery('> p', '#content');
//与jQuery('#content > p')效果一致

选择子元素还可以用jQuery的children方法来实现，在这种情况下可以通过向children()传入一个选择器参数来对返回的结果进行过滤。下述语句会选中#content元素的所有直级子元素：

jQuery('#content').children();

上述语句的执行结果基本上与jQuery(‘#content > *’)相同，但由于它减少了选择器的解析，因此其执行速度更快。不过事实上，这一速度上的差异效果有限，同时影响语句执行速度的因素也不一而足。一般来说，当使用存成变量的jQuery对象的时候，children()方法显得比较有用。比如：

var anchors = jQuery('a');
// 获取全部a元素的所有直级子元素，可以有三种方法
// #1
anchors.children();
// #2
jQuery('> *', anchors);
// #3
anchors.find('> *');

事实上，还有更多的方法来获取直级子元素！在这些方法中，第一种方法是最快的。如上面所提到的，可以通过向children()方法传入一个选择器表达式来对结果进行过滤：

jQuery('#content').children('p');

只有#content的直级p子元素会被返回。