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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
js时间查询插件使用详解
Apr 07 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 Javascript
JS函数本身的作用域实例分析
Mar 16 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+MSSQL分页的例子
2006/10/09 PHP
php Mysql日期和时间函数集合
2007/11/16 PHP
为PHP初学者的8点有效建议
2010/11/20 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
php实现简单文件下载的方法
2015/01/30 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
浅谈对yield的初步理解
2017/05/29 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
python reverse反转部分数组的实例
2018/12/13 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
《老山界》教学反思
2014/04/08 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书