在使用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>。从而可以设置样式了。
比如有这样一个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>。从而可以设置样式了。
标签:
JQuery,nt-child
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“JQuery学习笔记 nt-child的使用”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
2024年05月09日
2024年05月09日
- 《披萨塔,Pizza Tower》基础攻略 简述+配置+下载
- 中唱唱片群星《好歌珍藏-母爱·亲情》2CD[WAV+CUE]
- 中唱唱片群星《好歌珍藏-大地飞歌》2CD[WAV]
- 金海心-那么骄傲[WAV]
- 数毛社分析PS5 Pro规格:GPU主频高达2.35GHz
- 《死侍3》新正片片段:狼叔被死侍硫酸脸恶心到了
- 《地狱潜者2》CEO赞扬社区玩家:你们的意志与合作力让我印象深刻
- 张学友 歌神《等风雨经过3CD》[WAV+CUE][2GB]
- 华语流行《周杰伦 2022最伟大的作品》[FLAC/分轨][1.7GB]
- 孙燕姿《No. 13作品 跳舞的梵谷》[WAV+CUE][400MB]
- 张心柔.2012-吟游诗人【禾广娱乐】【FLAC分轨】
- 关淑怡.1991-恋一世的爱【宝丽金】【WAV+CUE】
- 群星.2010-我的舞台·2010快乐男声【天娱传媒】【WAV+CUE】
- 崩坏星穹铁道最新5月兑换码汇总 崩铁2024年兑换码分享
- 崩坏星穹铁道椒丘是男还是女 崩铁椒丘性别介绍