jQuery参考实例 2.2 选择同级邻近元素

本文翻译自jQuery Cookbook (O’Reilly 2009) 2.2 Selecting Specific Siblings

需求

在某元素的同级邻近元素中进行选择。

解决方案

如果需要选择的是紧邻某个对象的同级元素,我们可以使用“紧邻同级”连接符(+)。与子级连接符(>)类似,该连接符的两边各需一个选择器表达式。右边的表达式表示待选中的元素,而左边的表达式则表示紧邻的那个对象。以下面的HTML片段为例:

<div id="content">  
  <h1>Main title</h1>
  <h2>Section title</h2>
  <p>Some content...</p>
  <h2>Section title</h2>
  <p>More content...</p>
</div>  

如果想要选中紧邻h1元素之后的h2元素,可以使用以下选择器:

jQuery('h1 + h2');  

//选择所有紧邻h1元素之后的h2元素 在这个例子中,只有第一个h2元素会被选中。第二个h2元素不会被选中,因为它并未紧邻h1。

如果想要对某个元素的所有同级元素进行选择、过滤,而不论其紧邻与否,我们可以使用jQuery的siblings()方法,并通过传入一个选择器表达式来对结果进行过滤:

jQuery('h1').siblings('h2,h3,p');  
//选择h1同级元素中的所有h2、h3、p元素

有时,我们会根据同级元素相互之间的位置关系来进行选择;以下面的HTML片段为例:

<ul>  
  <li>First item</li>
  <li class="selected">Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
  <li>Fifth item</li>
</ul>  

可以使用以下方法来选择第二个li元素(li.selected)之后的所有li对象:

jQuery('li.selected').nextAll('li');  

nextAll()方法与siblings()方法一样,可以接受一个选择器表达式来对选择到的结果进行过滤。如果不传入该选择器表达式,返回的则是目标对象之后的所有同级元素。

对于选择第二个li元素之后的所有li对象,除了之前的方法,还可以通过另外一个CSS连接符来实现。连接符~是在CSS3标准中被加入的,因此,你可能还无法在实际工作的样式表中使用这个连接符 — 但幸运的是,我们可以在jQuery中使用该连接符而无需担心浏览器的支持问题。除了选中的是目标对象之后的所有同级元素,~连接符的使用与紧邻同级连接符+的使用基本一致。对于之前的HTML片段来说,可以用以下选择器来选中所有li.selected元素之后的li元素:

jQuery('li.selected ~ li');  

讨论

紧邻同级连接符(+)在概念上比较“另类”,因为它不像其它大多数选择器表达式那样,通过元素之间的上下层级关系来定位。不过,该连接符还是值得了解一番的,同时它也不失为一种快速选择目标的良好方案。

值得一提的是,+连接符的功能也可以不通过选择器来实现:

jQuery('h1').next('h2');  

next()方法可以很好的替代+选择器,尤其当我们与jQuery对象变量打交道的时候:

var topHeaders = jQuery('h1');  
topHeaders.next('h2').css('margin','0');  

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!