使用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. 为了支持AOP的编程模式，我为.NET Core写了一个轻量级的Interception框架[开源]

    ASP.NET Core具有一个以ServiceCollection和ServiceProvider为核心的依赖注入框架,虽然这只是一个很轻量级的框架,但是在大部分情况下能够满足我们的需要.不过我觉得 ...

  2. uva 558 - Wormholes(Bellman Ford判断负环）

    题目链接:558 - Wormholes 题目大意:给出n和m,表示有n个点,然后给出m条边,然后判断给出的有向图中是否存在负环. 解题思路:利用Bellman Ford算法,若进行第n次松弛时,还能 ...

  3. 查看大图 zoomImage

    添加引用 <link rel="stylesheet" media="screen" type="text/css" href=&qu ...

  4. WebService《JavaEE6权威指南 基础篇第4版》

    [Web服务] 为运行在不同平台和框架之上的软件提供了互操作的标准方式.良好的互操作性和可扩展性.消息采用自包含文档的形式. ——解决异构系统之间交互.解决异构系统通信问题:  1.通过XML,JSO ...

  5. 关于C#中文本模板(.tt)的简单应用

    这两天做项目突遇 .tt文件,之前没有接触过,so查询学习做笔记,帮助记忆和后来者. 在项目添加中点击选择文本模板 下面贴出代码,做了简单的注释 <#@ template debug=" ...

  6. ThinkPHP模板（一）

    如何关闭ThinkPHP的模板缓存 ThinkPHP的模板缓存是无奈关闭的,因为内置的模板引擎是一个编译型的模板引擎,必须经过编译后生成一个可执行的缓存文件才能被执行.但是可以设置缓存的有效期,例如设 ...

  7. vector和iterator及collection

    Collection是所有集合的最上层接口,它里面定义了所有集合对象都可以进行的操作:它有两个子接口,分别是List和Set.List会记录放在其中元素的放入顺序,形象地说,可以认为是一个传送带,它上 ...

  8. 手游产品经理初探（六）粗糙的logo会给产品致命一击

    假设你的游戏产品从logo的设计開始就不注重细节的话,那么你的产品将不会走多远! 我们把图片放大看: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1 ...

  9. Codeforces Round #253 (Div. 1) A. Borya and Hanabi 暴力

    A. Borya and Hanabi Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/442/p ...

  10. Codeforces Round #189 (Div. 1) B. Psychos in a Line 单调队列

    B. Psychos in a Line Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/problemset/p ...