jquery查找父元素、子元素(个人经验总结)

nnj

2014-04-09

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

jquery jquery子元素 jquery选择器 closest td