（3）选择元素——（12）为特定的方块加样式（Styling specific cells）

Earlier we added a highlightclass to all cells containing the text Henry. To style the cell next to each cell containing Henry, we can begin with the selector that we have already written, and simply call the .next()method on the result, as follows:

$(document).ready(function() {$('td:contains(Henry)').next().addClass('highlight');});

The tables should now look similar to the following screenshot:

之前，我们为所有包含文本Henry的方格添加了一个highlight类。为了给每一个包含Henry下一个方格加样式，我们可以以我们已经写下的选择器开始，然后仅仅在结果中调用一下.next()方法，如下：

$(document).ready(function() { $('td:contains(Henry)').next().addClass('highlight');});

现在，这个表看起来像下面的截图一样：

The .next()method selects only the very next sibling element. To highlight all of the cells following the one containing Henry, we could use the .nextAll()method instead:

$(document).ready(function() {$('td:contains(Henry)').nextAll().addClass('highlight');});

As the cells containing Henryare in the first column of the table, this code causes the rest of the cells in these rows to be highlighted, as shown in the following screenshot:

.next()方法仅仅选择了恰好挨着的兄弟节点。为了让包含Henry元素后面的所有的方块高亮，我们应该使用.nextAll()方法：

$(document).ready(function() { $('td:contains(Henry)').nextAll().addClass('highlight');});

由于包含Henry的文本在表格的第一列，这段代码导致这几行中其余的方块都高亮了。正如在下面的截屏中展示的那样：

As we might expect, the .next()and .nextAll()methods have counterparts: .prev()and .prevAll(). Additionally, .siblings()selects all other elements at the same DOM level, regardless of whether they come before or after the previously selected element.

我们可能想到.next() .nextAll()方法有着类似的东东：.prev() .prevAll()。另外，.siblings()选择了所有的在同一DOM层级的其他的元素，而不管他们是出现在之前选择的元素的前面还是后面。

To include the original cell (the one that contains Henry) along with the cells that follow, we can add the .andSelf()method, as follows:

$(document).ready(function() {$('td:contains(Henry)').nextAll().andSelf() .addClass('highlight');});

为了包含最开始的方块（包含Henry文字的那一个）和后面的方块一起，我们添加l.andSelf()方法，如下：

$(document).ready(function() {$('td:contains(Henry)').nextAll().andSelf() .addClass('highlight');});

With this modification in place, all of the cells in the row get the styling offered by the highlightclass, as follows:

在修改了这些地方以后，这一行中所有的方格都有着在highlight类定义的样式，如下：

To be sure, there are a multitude of selector and traversal-method combinations by which we can select the same set of elements. Here, for example, is another way to select every cell in each row where at least one of the cells contains Henry:

$(document).ready(function() {
    $('td:contains(Henry)').parent().children().addClass('highlight');
});

Here, rather than traversing across to sibling elements, we travel up one level in the DOM to the <tr>with .parent()and then select all of the row's cells with .children().

为了确定，有很多选择器和遍历的方法的范例，通过他们我们可以选择相同的元素集合。比如，在这里有另外一个选择至少有一个方格含有Henry的一行每一个元素的方法：

$(document).ready(function() {
    $('td:contains(Henry)').parent().children().addClass('highlight');
});

在这里，我们没有遍历兄弟节点，我们向上走了一层，通过.parent()找到了tr元素，然后通过.children()找到了这一行的所有元素。