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 Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
在js中单选框和复选框获取值的方式
Nov 06 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
学习vue.js计算属性
Dec 03 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 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动态创建Flash动画
2006/10/09 PHP
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
微信小程序实现人脸识别
2018/05/25 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
在Django的上下文中设置变量的方法
2015/07/20 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Python用模块pytz来转换时区
2016/08/19 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
详解django2中关于时间处理策略
2019/03/06 Python
python绘制随机网络图形示例
2019/11/21 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
销售简历自我评价
2014/01/24 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
材料员岗位职责
2014/03/13 职场文书
药品业务员岗位职责
2014/04/17 职场文书
质量承诺书怎么写
2014/05/24 职场文书
电子信息工程自荐信
2014/05/26 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
航班延误投诉信
2015/07/02 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript