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 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
video.js使用改变ui过程
Mar 05 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
小程序实现横向滑动日历效果
Oct 21 Javascript
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 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
php命名空间学习详解
2014/02/27 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
python中mechanize库的简单使用示例
2014/01/10 Python
python3使用GUI统计代码量
2019/09/18 Python
详解django中Template语言
2020/02/22 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
大学毕业的自我鉴定
2013/10/08 职场文书
小学生演讲稿
2014/01/12 职场文书
党员组织关系介绍信
2014/02/13 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
告知书格式
2015/07/01 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
SpringBoot集成Redis的思路详解
2021/10/16 Redis
JavaScript原型链详解
2021/11/07 Javascript