首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

(三)选择元素——(12)为特定的方块加样式(Styling specific cells)

2013-10-08 
(3)选择元素——(12)为特定的方块加样式(Styling specific cells)Earlier we added a highlightclass to all

(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:


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

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:


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

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');});
With this modification in place, all of the cells in the row get the styling offered by the highlightclass, as follows:
(三)选择元素——(12)为特定的方块加样式(Styling specific cells)
在修改了这些地方以后,这一行中所有的方格都有着在highlight类定义的样式,如下:

(三)选择元素——(12)为特定的方块加样式(Styling specific cells)

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');});
在这里,我们没有遍历兄弟节点,我们向上走了一层,通过.parent()找到了tr元素,然后通过.children()找到了这一行的所有元素。




热点排行