09-解决方案

2.2.2　解决方案

如果你想寻找的是特定元素相邻的兄弟元素，那么可以使用相邻兄弟元素组合符（ + ）。和子元素组合符（ > ）类似，兄弟元素组合符的两边各有一个选择器表达式。右边的表达式是选择器的主题，而左边的表达式是你希望匹配的兄弟元素。

下面是一些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.selected 之后）的所有列表项：

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

正如 siblings() , nextAll() 方法接受一个选择器表达式，在选择集返回之前进行过滤。如果省略这个选择器, nextAll() 将返回存在于主题元素之后主题元素的所有兄弟元素，尽管不会返回前面的元素。

对于前一个例子，也可以使用另一个CSS组合符选择第二个列表项之后的所有列表项。在CSS3中加入了普通兄弟元素组合符（ ～ ），因此你可能无法在实际的样式单中使用它，幸运的是，可以在jQuery中使用它而不用考虑支持的问题。该组合符的工作方式与相邻兄弟元素组合符（ + ）完全相同，但是它选择的是后续（不仅是相邻的那一个）的兄弟元素。使用前面的标记，可以用如下的选择器选择 li.selected 之后的所有列表项：

jQuery('li.selected～li');