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 相关文章推荐
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
vue实现手机端省市区区域选择
Sep 27 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 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的知识
2006/11/17 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
原生js实现放大镜
2017/02/20 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
深入讲解Python中的迭代器和生成器
2015/10/26 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
用Django写天气预报查询网站
2018/10/21 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
Python 发送邮件方法总结
2020/08/10 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
信访工作者先进事迹
2014/01/17 职场文书
疾病捐款倡议书
2014/05/13 职场文书
搞笑结婚保证书
2015/05/08 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
创业计划书之面包店
2019/09/12 职场文书
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android