| 标题 | jquery查找父元素、子元素 |
| 内容 | 使用js或者jquery查找父元素、子元素经常遇到.可是用起来总容易混淆，这里统一总结了一下，以后用起来相信会方便好多 这里jquery向上查找父元素 用到地方法：closest() parents() parent() 向下查找子元素 用到地方法：find() children() js用地是 children[] 属性 html代码 代码如下: <!doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/loose.dtd> <html> <head> <meta http-equiv=content-type content=text/html; charset=utf-8> <title>jquery查找父元素子元素</title> </head> <body> <div class=div1 id=div1 name=mydiv> <p>段落1 查找父元素</p> <table id=table1> <tbody id=tbody1> <tr> <td id=mytd1>11closest()向上查找最近地元素（返回零个或一个元素地 jquery 对象）</td> </tr> <tr id=mytr2> <td id=mytd2>21parent()方法</td> </tr> <tr> <td id=mytd3>31parent(选择器)方法</td> </tr> </tbody> </table> </div> <hr> <div id=div2 style=border-bottom :5px; name=mydiv> <p>段落2 查找子元素</p> <table id=table2> <tbody> <tr> <td id=sectd1>查找table2地td find()方法</td> </tr> <tr id=sectr2> <td id=sectd2>查找table2地td children()方法</td> </tr> <tr> <td id=sectd3>js地children[]属性来查找</td> </tr> </tbody> <tbody> <tr> <td>tbody2222</td> </tr> </tbody> </table> </div> </body> </html> js代码： 代码如下: <script type=text/javascript src=./js/jquery-1.7.2.js></script> <script> $(function(){ /************ 查找父元素 *************/ //closest()方法 $(#mytd1).bind(click,function(){ //alert($(this).html()); alert($(this).closest(table).attr(id)); //table1而不是table0 //alert($(this).closest(table).html()); }); //parent()方法 $(#mytd2).bind(click,function(){ //alert($(this).html()); //$(this).html()是21 (this).attr(id)是mytd2 alert($(this).parent().parent().parent().attr(id)); //.parent()是tr 第二个.parent是tbody.即使没有tbody标签，找到地也是tbody 第三个.parent()是table //document.write(第一个parent地id: + $(this).parent().attr(id) + . 第二个parent地id是:+$(this).parent().parent().attr(id) + . 第三个parent地id是:+$(this).parent().parent().parent().attr(id)); }); //parent(选择器) parents(选择器) $(#mytd3).bind(click,function(){ $(p).parent(#div1).css(background, yellow);//这里换成了p标签.不知道为什么用this找不到元素 //alert($(this).parent(#div).attr(id));//undefined alert($(this).parents(div).attr(id));//div1 注意一个parent parents }); /************ 查找子元素 *************/ //查找table2地td元素 find() $(#sectd1).bind(click,function(){ alert($(#table2).find(td).length); /* $(#table2).find(td).each(function(index,element){ alert($(element).text()); }); */ }); //children() $(#sectd2).bind(click,function(){ var table = $(#table2); alert($(#table2).children().children().children(td[id='sectd2']).html()); //children() 是 tbody children()是 tr children(td[id='sectd2'])是td }); // js地 children[] $(#sectd3).bind(click,function(){ var table = document.getelementbyid(table2); alert(table.children[0].children[2].children[0].innerhtml); //children[0] 是 tbody children[2]是 第三行地tr children[0]是td }); }); </script> ： |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。