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 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
BootStrap selectpicker
Jun 20 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
puppeteer实现html截图的示例代码
Jan 10 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 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+SQLite存储方案
2010/09/04 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
php制作动态随机验证码
2015/02/12 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
Nginx实现反向代理
2017/09/20 Servers
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
pytorch实现线性拟合方式
2020/01/15 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
python logging模块的使用
2020/09/07 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
教师党员思想汇报
2014/01/06 职场文书
高级销售求职信
2014/02/21 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
导游词之天津古文化街
2019/11/09 职场文书