JQuery学习笔记 nt-child的使用

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JQuery学习笔记 nt-child的使用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2326字，纯文字阅读大概需要4分钟。

内容图文

<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>。从而可以设置样式了。
            
            


           
                
                                                

内容总结

以上是互联网集市为您收集整理的JQuery学习笔记 nt-child的使用全部内容，希望文章能够帮你解决JQuery学习笔记 nt-child的使用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端