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，所以不符合。
posted on 2018-01-10 10:00 Angry-apple 阅读(9473) 评论(0) 编辑 收藏 举报
