使用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. heritrix启动问题修正

    今天抽时间想看看其他蜘蛛的情况,于是下载了heritrix-1.14.2.搜索了一下相关的安装介绍.基本步骤如下: (1)解压下载的heritrix-1.14.2.zip的压缩包,如将其放在E:\da ...

  2. Simple Worker Thread Class

    http://www.codeproject.com/Articles/36184/Simple-Worker-Thread-Class Introduction Many times we need ...

  3. Study notes for Clustering and K-means

    1. Clustering Analysis Clustering is the process of grouping a set of (unlabeled) data objects into ...

  4. C++学习笔记之友元

    一.引言 C++控制对类对象私有部分(private)的访问,通常只能通过公有的(public)类方法去访问.但是有时候这种限制太严格,不适合特定的问题,于是C++提供了另外一种形式的访问权限:友元. ...

  5. linux 源码编译（转）

    源代码的用处无非是以下两点；1、软件根据用户的需要加以定制；2、二次开发；注：要根据软件的许可证书约定为准，开发者许可二次开发才行；1、源码包的打包格式；源代码一般以file.tar.gz file. ...

  6. codeforces Gym 100187L L. Ministry of Truth 水题

    L. Ministry of Truth Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100187/p ...

  7. C#操作Word (2)-- 打开&关闭Word文档

    本文正式开始在VS2010中使用C#语言操作Word2007. 不是十分了解Word对象模型的朋友,请参考上一篇文章,或者下载:C#操作Word2007.pdf. ------------------ ...

  8. 一步步学Mybatis-实现多表联合查询（4）

    上一章节中我们已经完成了对单表的CRUD操作,接下来今天这一讲讲述的是关于Mybatis在多表查询时候的应用,毕竟实际业务中也是多表的联合查询比较多嘛~ 还记得最一开始我们新建过一张Website表吗 ...

  9. 【原创】PostSharp入门笔记

    最近写了一个抓取软件,用户反映软件偶尔会抛异常: 由于当时写代码时没有注意异常处理,大部分方法都没有写try…catch…finally的语句,所以很难找出异常是出在哪个地方,难道要为所有方法加上tr ...

  10. iOS 2D绘图详解（Quartz 2D）之阴影和渐变(Shadow,Gradient)

    前言:这个系列写道这里已经是第五篇了,本文会介绍下阴影和渐变的基础知识,以及一些基本的Demo Code展示,应该还会有两篇,介绍下Bitmap绘制以及Pattern等知识. Shadow shado ...