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 相关文章推荐
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
jQuery 连续列表实现代码
Dec 21 Javascript
JavaScript 未结束的字符串常量常见解决方法
Jan 24 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
微信小程序实现点击页面出现文字
Sep 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
SONY ICF-F10中波修复记
2021/03/02 无线电
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
php组合排序简单实现方法
2016/10/15 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
Vue实现简单的跑马灯
2020/05/25 Javascript
python 不关闭控制台的实现方法
2011/10/23 Python
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
三下乡活动方案
2014/01/31 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
工程资料员岗位职责
2015/04/13 职场文书
行为规范主题班会
2015/08/13 职场文书
Golang 入门 之url 包
2022/05/04 Golang