jquery 中后代遍历之children、find区别

最新推荐文章于 2020-09-22 09:27:27 发布

转载最新推荐文章于 2020-09-22 09:27:27 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/angry-apple/p/8257097.html

文章标签：

#javascript #ViewUI

本文通过实例对比了jQuery中children和find方法的区别。children仅选取直接子元素，而find则可遍历所有后代元素，包括子元素及更深层级的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery 中children、find区别

首先看一段HTML代码，如下：

 1 <table id="tb">
 2     <tr>
 3         <td>0</td>
 4         <td>1</td>
 5         <td>2</td>
 6     </tr>
 7     <tr>
 8         <td>3</td>
 9         <td>4</td>
10         <td>5</td>
11     </tr>
12 </table>

如果要获取第一个tr里边的第二个td的值：

children:

$('#tb>tbody').children('tr:eq(0) td:eq(1)').html()

find:

$('#tb>tbody').find('tr:eq(0) td:eq(1)').html()

结果：

children获取的值为：undefined

find获取的值为：4

结论：

children()方法查找的是孩子。（仅儿子辈）。

find()方法查找的是子孙后代。

.find()方法要注意的知识点：

1、find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。

2、find(selector)方法是返回匹配元素集合中每个元素的后代。参数是必选的，可以为选择器、jquery对象可元素来对元素进行筛选。

3、find只在后代中遍历，不包括自己。

解释：find只在后代中遍历，不包括自己：

1 <body>
2     <div class="css">
3         <p class="rain">测试1</p>
4     </div>
5     <div class="rain">
6         <p>测试2</p>
7     </div>
8 </body>

如果用find方法找到div里边含有rain的类：

$('div').find('.rain').css('color',"red");

结果：

结论：

上面例子中$（‘div’）包含两个元素，第一个元素符合要求，但第二个元素div本身的class虽然是“rain”,但其内部没有class=rain，所以不符合。

转载于:https://www.cnblogs.com/angry-apple/p/8257097.html