JQuery学习笔记 nt-child的使用


Posted in Javascript onJanuary 17, 2011

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

Javascript 相关文章推荐
javascript知识点收藏
Feb 22 Javascript
JavaScript 继承详解(一)
Jul 13 Javascript
js实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
jQuery的框架介绍
May 11 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 #Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 #Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 #Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 #Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 #Javascript
JavaScript去掉数组中的重复元素
Jan 13 #Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 #Javascript
You might like
php防止sql注入代码实例
2013/12/18 PHP
JS 树形递归实例代码
2010/05/18 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
python函数的作用域及关键字详解
2019/08/20 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
Oracle性能调优原则
2012/05/03 面试题
工业设计专业个人求职信范文
2013/12/28 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
环保建议书作文
2014/03/12 职场文书
求职信怎么写
2014/05/23 职场文书
2014年纠风工作总结
2014/12/08 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers