使用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>
：
更多信息请查看IT技术专栏