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 相关文章推荐
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
28个JS验证函数收集
Mar 02 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
node.js 如何监视文件变化
Sep 01 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
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
html下载本地
2006/06/19 Javascript
一个加载js文件的小脚本
2007/06/28 Javascript
Javascript 复制数组实现代码
2009/11/26 Javascript
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
python字符串替换示例
2014/04/24 Python
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
详解Python是如何实现issubclass的
2019/07/24 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
wxPython实现整点报时
2019/11/18 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
python中format函数如何使用
2020/06/22 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
python在地图上画比例的实例详解
2020/11/13 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
在线服装零售商:SheIn
2016/07/22 全球购物
毕业生就业意向书
2014/04/01 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
任命书模板
2014/06/04 职场文书
承诺函格式模板
2015/01/21 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
钱学森观后感
2015/06/04 职场文书