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');