使用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技術專欄
版權所有:易賢網
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試