使用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>