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


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,所以不符合。

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM