使用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查找父元素、子元素(个人经验总结)的更多相关文章

  1. WPF查找父元素子元素

    原文:WPF查找父元素子元素 /// <summary>        /// WPF中查找元素的父元素        /// </summary>        /// &l ...

  2. 当xml结构很深时候 可以通过父节点删除子元素

    当xml结构很深时候 可以通过父节点删除子元素

  3. Jquery中父，子页面之间元素获取及方法调用

    一.jquery 父.子页面之间页面元素的获取,方法的调用: 1. 父页面获取子页面元素: 格式:$("#iframe的ID").contents().find("#if ...

  4. jquery 获取父窗口的元素 父窗口 子窗口

    一.获取页面元素 取父窗口的元素方法:$(selector, window.parent.document); 那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent ...

  5. jQuery 查找父元素

    function deletesec1Div5(obj){ $(obj).closest(".sec1-div5").remove();}自己写的一段代码,实现了table中的全选 ...

  6. jQuery 获取父窗口的元素 父窗口 子窗口(iframe)

    $("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementById ...

  7. jquery 获取父窗口的元素、父窗口、子窗口

    一.获取父窗口元素: $("#父窗口元素ID",window.parent.document):对应javascript版本为window.parent.document.getE ...

  8. jquery取前、后、父、子元素

    前.prev(); 后.next(); 父.parent(); 子.children(); 注意:前的前是.prev().prev(),例如前元素无i,但前的前的i元素有i,不能写成.prev('i' ...

  9. jQuery获取父窗口的元素

    js获取父页面的元素可以用 $(window.parent.document).find("#customer_id").val();这里的customer_id表示父页面某一个元 ...

随机推荐

  1. PowerDesigner反向生成Mysql数据原型

    PowerDesigner反向生成Mysql数据原型 注意事项: (1)JVM 要32位的. (2)需配置JAVA_HOME环境变量指向所需JVM. (3)需配置CLASSPATH环境变量执行 MyS ...

  2. 设置ul阴影效果和边框圆角

    ul.box {position: relative;z-index: 1; /* prevent shadows falling behind containers with backgrounds ...

  3. sql server 复制 需要有实际的服务器名称才能连接到服务器……

    原因是:之前修改过服务器实例名称执行一下语句 select @@servername select SERVERPROPERTY ('servername') 可以看到,两个不同的结果 修改实例名称i ...

  4. chart.js接口开发：X轴步长和Labels旋转角

    一. 当初为什么选择chart.js 当初项目使用库是Zepto,Zepto能支持的chart处理库太少.也是为了使得项目比较轻量化,所以选择了chart.js. 但是最后的显示结果实在太差,放弃了c ...

  5. 【汉字乱码】IE下GET形式传递汉字。

    js:encodeURI(); php:urlencode(); 举例: 本来打算这样使用 <a href="list.php?plate=辖区动态" charset=&qu ...

  6. thinkphp关联查询

    $list=$model->table("$dName d ,$mName m,$cName c") ->field('d.*,m.title as musicTitl ...

  7. JS同名方法，

    JS同名方法只会调用最后一个方法. JS中同时绑定多个事件,先绑定的先调用.后绑定的后调用.

  8. 1028 - Carl the Ant

    Ants leave small chemical trails on the ground in order to mark paths for other ants to follow. Ordi ...

  9. cocos2d-x 2.2 移植wp8遇到的坑

    这两天正在将之前的一款cocos2d游戏,移植到wp平台上,这里记录一下所遇到的问题以及解决方法. 我是用的cocos2d下面的例子程序进行修改的. 遇到的第一个问题是资源路径的问题,当时我把解决方案 ...

  10. $parse/$eval和$observe/$watch如何区分

    大家在看angular的时候,有时候偶尔会看到$parse,$eval和$observe,$watch这两对语法,随着深入使用angular,就不可避免使用到它.文章从内部运行机制跟实际需求的角度来解 ...