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

使用js或者jquery查找父元素、子元素经常遇到。可是用起来总容易混淆，这里统一总结了一下，以后用起来相信会方便好多

这里jquery向上查找父元素 用到的方法：closest() parents() parent()

向下查找子元素 用到的方法：find() children()

js用的是 children[] 属性

html代码

复制代码 代码如下:

段落1 查找父元素

11closest()向上查找最近的元素（返回零个或一个元素的 jQuery 对象）

21parent()方法

31parent("选择器")方法

---

段落2 查找子元素

查找table2的td find()方法

查找table2的td children()方法

js的children[]属性来查找

tbody2222

js代码：

复制代码 代码如下:

<script> <br><br>$(function(){ <BR>/************ 查找父元素 *************/ <BR>//closest()方法 <BR>$("#mytd1").bind("click",function(){ <BR>//alert($(this).html()); <BR>alert($(this).closest("table").attr("id")); //table1而不是table0 <BR>//alert($(this).closest("table").html()); <BR>}); <br><br>//parent()方法 <BR>$("#mytd2").bind("click",function(){ <BR>//alert($(this).html()); //$(this).html()是21 (this).attr("id")是mytd2 <BR>alert($(this).parent().parent().parent().attr("id")); <BR>//.parent()是tr 第二个.parent是tbody。即使没有tbody标签，找到的也是tbody 第三个.parent()是table <br><br>//document.write("第一个parent的id:" + $(this).parent().attr("id") + "。 第二个parent的id是:"+$(this).parent().parent().attr("id") + "。 第三个parent的id是:"+$(this).parent().parent().parent().attr("id")); <br><br>}); <br><br>//parent("选择器") parents("选择器") <BR>$("#mytd3").bind("click",function(){ <BR>$("p").parent("#div1").css("background", "yellow");//这里换成了p标签。不知道为什么用this找不到元素 <BR>//alert($(this).parent("#div").attr("id"));//undefined <BR>alert($(this).parents("div").attr("id"));//div1 注意一个parent parents <BR>}); <br><br><BR>/************ 查找子元素 *************/ <BR>//查找table2的td元素 find() <BR>$("#sectd1").bind("click",function(){ <BR>alert($("#table2").find("td").length); <BR>/* $("#table2").find("td").each(function(index,element){ <BR>alert($(element).text()); <BR>}); */ <BR>}); <br><br>//children() <BR>$("#sectd2").bind("click",function(){ <BR>var table = $("#table2"); <BR>alert($("#table2").children().children().children("td[id='sectd2']").html()); <BR>//children() 是 tbody children()是 tr children("td[id='sectd2']")是td <BR>}); <br><br><BR>// js的 children[] <BR>$("#sectd3").bind("click",function(){ <BR>var table = document.getElementById("table2"); <BR>alert(table.children[0].children[2].children[0].innerHTML); <BR>//children[0] 是 tbody children[2]是 第三行的tr children[0]是td <BR>}); <br><br>}); <BR></script>