使用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. [源码分享] HIVE表数据量统计&邮件

    概要: 计算HIVE BI库下每天数据表总大小及增量 输出: 总大小:xxxG 日同比新增数据量:xxxG 周同比新增数据量:xxxG 月同比新增数据量:xxxG 总表数:xxx 日新增表数:xxx ...

  2. Lync2010升级到2013之账户启用！

    打开ADUC,将用户添加到 csadministrator 组中:

  3. 使用 preferredStatusBarStyle 设置状态栏颜色

    iOS9之前,在plist文件中 插入一个新的key,名字为View controller-based status bar appearance,并将其值设置为NO. 然后敲入代码: [UIAppl ...

  4. python学习进阶一

    map()函数 def format_name(s): return s.capitalize() print map(format_name, ['adam', 'LISA', 'barT']) R ...

  5. Visual Studio 2015 和 Apache Cordova

    英文原版:http://www.codeproject.com/Articles/860150/Visual-Studio-and-Apache-Cordova 在开始前,问一下自己下面这些问题: 熟 ...

  6. Codeforces Educational Codeforces Round 3 D. Gadgets for dollars and pounds 二分，贪心

    D. Gadgets for dollars and pounds 题目连接: http://www.codeforces.com/contest/609/problem/C Description ...

  7. VK Cup 2012 Qualification Round 1 C. Cd and pwd commands 模拟

    C. Cd and pwd commands Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/problemset ...

  8. 架构探险——第二章（为web应用添加业务功能）

    第二章不使用框架完成了自己的Web应用. 重点: 服务层的完善优化过程,思路 在看这一段的时候引起了无数次的共鸣.相信大家在开始接触Java Web的时候,都做过类似的封装和优化. 第一版 在Serv ...

  9. ScrollView反弹效果 仿小米私密短信效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/28441197 如今非常多APP都给ScrollView加入了反弹效果.QQ.小米 ...

  10. JVM剖析

    JVM剖析 这篇文章详细解释了Java虚拟机的内部架构.以下这幅图展示了Java虚拟机里面的关键组件(是依据Java SE 7版本的Java虚拟机). 这些组件将在下面的两个章节一一展开.第一章节涵盖 ...