jquery查找父元素、子元素(个人经验总结)


Posted in Javascript onApril 09, 2014

使用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>
Javascript 相关文章推荐
关于jquery的多个选择器的使用示例
Oct 18 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
js控制iframe的高度/宽度让其自适应内容
Apr 09 #Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 #Javascript
jQuery遍历Table应用示例
Apr 09 #Javascript
通过url查找a元素并点击
Apr 09 #Javascript
js数组方法扩展实现数组统计函数
Apr 09 #Javascript
jquery实现pager控件示例
Apr 09 #Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 #Javascript
You might like
PHP中的超全局变量
2006/10/09 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
Python可迭代对象操作示例
2019/05/07 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
群众路线党课主持词
2014/04/01 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
员工离职通知函
2015/04/25 职场文书
道歉情书大全
2015/05/12 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
Python合并pdf文件的工具
2021/07/01 Python
Mysql binlog日志文件过大的解决
2021/10/05 MySQL