使用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. 字符编解码的故事（ASCII，ANSI，Unicode，Utf-8）

    很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以表示世界上的万物.他们认为8个开关状态作为原子单位很好,于是他们把这称为"字节". 再后来,他们又做了一 ...

  2. String.Format格式说明（转）

    C#格式化数值结果表 字符 说明 示例 输出 C 货币 string.Format("{0:C3}", 2) ＄2.000 D 十进制 string.Format("{0 ...

  3. sqlservice 查询该字段的值是否为数字、不包含a-z字母、获取中文的首字母

    select zjm from xskh where guid_yw='e6ee44f3-98ab-4446-bd9b-db2e525d3b24' and zjm not like  '%[ABCDE ...

  4. 开源文件比较工具：WinMerge、KDiff3、diffuse

    为了寻找免费的BeyondCompare的替代品,最后经过实用,找到如下一些: 1.diffuse 感受:如果仅仅是比较两个文本类的文件,这个软件也就够用了. 安装好后,对着文件点击右键,会出现“Op ...

  5. Win7 x64下进程保护与文件保护(ObRegisterCallbacks)

    进程保护部分参考 http://bbs.pediy.com/showthread.php?t=168023 进程保护,在任务管理器不能结束进程 #ifndef CXX_PROTECTPROCESSX6 ...

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

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

  7. Thread message loop for a thread with a hidden window? Make AllocateHwnd safe

    Thread message loop for a thread with a hidden window? I have a Delphi 6 application that has a thre ...

  8. c# 轻量级 ORM 框架 之 DBHelper 实现 (三)

    周末了比较清闲,把自己的orm框架整理了下,开源了. 已经做出来的东西通常感觉有些简单,一些新手或许听到"框架"一类的词觉得有些"高深",简单来说orm就是把a ...

  9. 高斯混合和EM算法

    首先介绍高斯混合模型: 高斯混合模型是指具有以下形式的概率分布模型: 一般其他分布的混合模型用相应的概率密度代替(1)式中的高斯分布密度即可. 给定训练集,我们希望构建该数据联合分布 这里,其中是概率 ...

  10. Android Studio开发JNIproject

    使用Android Sutdio创建一个新的project后,接下来记录创建NDKproject的基本步骤. 本文将达到: 1. 创建NDKproject 2. 在JNI中输出Log语句 3. 指定编 ...