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

本文翻译自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子元素会被返回。