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中通过URL传递汉字的方法
Apr 09 Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
javascript数组去重方法分析
Dec 15 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 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中设置时区方法小结
2012/06/03 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
js变换显示图片的实例
2013/04/16 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
Python正则表达式匹配HTML页面编码
2015/04/08 Python
整理Python中的赋值运算符
2015/05/13 Python
python 网络爬虫初级实现代码
2016/02/27 Python
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
python使用配置文件过程详解
2019/12/28 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
中科前程Java笔试题
2016/11/20 面试题
幼儿园的门卫岗位职责
2014/04/10 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
检讨书1000字
2014/10/11 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
Linux安装apache服务器的配置过程
2021/11/27 Servers