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

时间:2023-03-08 16:18:02

jquery 中children、find区别

首先看一段HTML代码,如下:

 <table id="tb">
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</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只在后代中遍历,不包括自己:

 <body>
<div class="css">
<p class="rain">测试1</p>
</div>
<div class="rain">
<p>测试2</p>
</div>
</body>

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

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

结果:

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

结论:

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