DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> JQuery學習筆記 nt-child的使用
JQuery學習筆記 nt-child的使用
編輯:JQuery特效代碼     
在使用JQuery的時候如果你想尋找某個容器(諸如div或者是table中的某些子元素),那麼很容易就使用find方法。find將使用迭代的方式尋找所有符合條件的子元素,並且可以統一、批量的設置css等內容。
比如有這樣一個table:
代碼如下:
<table id="outer">
<tr>
<td>
<table id="nested">
<tr>
<td>
內嵌Table,行1列1
</td>
<td>
內嵌Table,行1列2
</td>
</tr>
<tr>
<td>
內嵌Table,行2列1
</td>
<td>
內嵌Table,行2列2
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
第一個Table,行2列1
</td>
<td>
第一個Table,行2列2
</td>
</tr>
</table>

現在要求把所有的字體設置成藍色,直接這樣做即可。
$("table").css("color", "blue");
注意:$("table")表示頁面上“每一個table“都這樣設置。

下面看一個復雜的例子——
【把每個table的第二行第二列的字體設置成紅色】

或許你可能為這樣思考——因為$("table")表示“每一個table”,因此如果寫成“$(table tr:eq(1) td:eq(1)).css("color","red");就可以大功告成(每一個table的第二行第二列)……
真的是這樣嗎?你如果運行一下結果,便大吃一驚——因為只有“內嵌Table,行1列1“變成了紅色!這根本不是我們預期的結果。
為什麼呢?道理很簡單——因為JQuery如果通過空格分割html標簽或者其它相關屬性,意味著是從“父標簽”中逐個尋找自標簽,滿足條件為止。結果就變成了“在父table中尋找所有的tr,找出滿足條件的第二個tr,然後尋找第二個tr中的第一個td,並且染成紅色!”

下面給出完整定義——
$("HTML標簽,html子標簽:eq(n) html子子標簽:eq(n)……):從HTML標簽(父)尋找滿足條件的第n+1個子標簽,然後在第n+1個子標簽中尋找第n+1個子標簽……直到全部遍歷為止。
因此這種方法是錯誤的,初學者尤其容易犯哦。

那麼應該怎麼辦呢?有人想到了這個方法——
代碼如下:
$("table").each(function () {
$(this).find("tr:eq(1) td:eq(1)").css("color", "red");
});

他的理由是:遍歷每一個table,然後把每一個table的第二行第二列設置顏色。

相比第一個答案,第二個人似乎聰明了一點,他感悟到“table”父標簽不會自行重復尋找(JQuery在前套標簽的時候只會深度遍歷最裡邊的那個標簽,也就是藍色定義的“……”那個無窮大的部分)。因此想到用each——誠然,each的確解決了深度遍歷table的問題,但是第一個table的find依舊是按照藍色部分思路執行(依舊尋找父table中第二個tr,第二個tr中的第二個td),所以find也是只有末尾HTML進行深度遍歷。

此時我們只能使用這樣的方法:
$("tr:nth-child(2) td:nth-child(2)").css("color", "red");

nth-child(n)是CSS偽類的一個方法,可以用於JQuery,這個代碼的意思是:尋找離開第n個tr最近的容器元素,然後對自己進行設置。
這樣一來,“tr:nth-child(2)”將分別對應兩個<table>。從而可以設置樣式了。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved