JQuery學(xué)習(xí)筆記 nt-child的使用

2019-11-20 23:58:53

字體：大中小

供稿：網(wǎng)友

在使用JQuery的時(shí)候如果你想尋找某個(gè)容器（諸如div或者是table中的某些子元素），那么很容易就使用find方法。find將使用迭代的方式尋找所有符合條件的子元素，并且可以統(tǒng)一、批量的設(shè)置css等內(nèi)容。
比如有這樣一個(gè)table：

復(fù)制代碼代碼如下:

 
<table id="outer"> 
<tr> 
<td> 
<table id="nested"> 
<tr> 
<td> 
內(nèi)嵌Table，行1列1 
</td> 
<td> 
內(nèi)嵌Table，行1列2 
</td> 
</tr> 
<tr> 
<td> 
內(nèi)嵌Table，行2列1 
</td> 
<td> 
內(nèi)嵌Table，行2列2 
</td> 
</tr> 
</table> 
</td> 
</tr> 
<tr> 
<td> 
第一個(gè)Table，行2列1 
</td> 
<td> 
第一個(gè)Table，行2列2 
</td> 
</tr> 
</table> 

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

下面看一個(gè)復(fù)雜的例子――
【把每個(gè)table的第二行第二列的字體設(shè)置成紅色】

或許你可能為這樣思考――因?yàn)?("table")表示“每一個(gè)table”，因此如果寫成“$(table tr:eq(1) td:eq(1)).css("color","red");就可以大功告成（每一個(gè)table的第二行第二列）……
真的是這樣嗎？你如果運(yùn)行一下結(jié)果，便大吃一驚――因?yàn)橹挥小皟?nèi)嵌Table，行1列1“變成了紅色！這根本不是我們預(yù)期的結(jié)果。
為什么呢？道理很簡(jiǎn)單――因?yàn)镴Query如果通過空格分割html標(biāo)簽或者其它相關(guān)屬性，意味著是從“父標(biāo)簽”中逐個(gè)尋找自標(biāo)簽，滿足條件為止。結(jié)果就變成了“在父table中尋找所有的tr，找出滿足條件的第二個(gè)tr，然后尋找第二個(gè)tr中的第一個(gè)td，并且染成紅色！”

下面給出完整定義――
$("HTML標(biāo)簽，html子標(biāo)簽:eq(n) html子子標(biāo)簽:eq(n)……）：從HTML標(biāo)簽（父）尋找滿足條件的第n+1個(gè)子標(biāo)簽，然后在第n+1個(gè)子標(biāo)簽中尋找第n+1個(gè)子標(biāo)簽……直到全部遍歷為止。
因此這種方法是錯(cuò)誤的，初學(xué)者尤其容易犯哦。

那么應(yīng)該怎么辦呢？有人想到了這個(gè)方法――

復(fù)制代碼代碼如下:

 
$("table").each(function () { 
$(this).find("tr:eq(1) td:eq(1)").css("color", "red"); 
}); 

他的理由是：遍歷每一個(gè)table，然后把每一個(gè)table的第二行第二列設(shè)置顏色。

相比第一個(gè)答案，第二個(gè)人似乎聰明了一點(diǎn)，他感悟到“table”父標(biāo)簽不會(huì)自行重復(fù)尋找（JQuery在前套標(biāo)簽的時(shí)候只會(huì)深度遍歷最里邊的那個(gè)標(biāo)簽，也就是藍(lán)色定義的“……”那個(gè)無窮大的部分）。因此想到用each――誠然，each的確解決了深度遍歷table的問題，但是第一個(gè)table的find依舊是按照藍(lán)色部分思路執(zhí)行（依舊尋找父table中第二個(gè)tr，第二個(gè)tr中的第二個(gè)td），所以find也是只有末尾HTML進(jìn)行深度遍歷。

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

nth-child(n)是CSS偽類的一個(gè)方法，可以用于JQuery，這個(gè)代碼的意思是：尋找離開第n個(gè)tr最近的容器元素，然后對(duì)自己進(jìn)行設(shè)置。
這樣一來，“tr:nth-child(2)”將分別對(duì)應(yīng)兩個(gè)<table>。從而可以設(shè)置樣式了。

上一篇：Jquery 插件開發(fā)筆記整理

下一篇：Jquery知識(shí)點(diǎn)三 jquery表單對(duì)象操作