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 相关文章推荐
javascript 不间断的图片滚动并可点击
Jan 15 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
vue项目中openlayers绘制行政区划
Dec 24 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 smarty模版引擎中的缓存应用
2009/12/11 PHP
20个PHP常用类库小结
2011/09/11 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
php单例模式的简单实现方法
2016/06/10 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
显示js对象所有属性和方法的函数
2009/10/16 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
python异常处理和日志处理方式
2019/12/24 Python
pytorch forward两个参数实例
2020/01/17 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
幼儿园小班教师寄语
2014/04/03 职场文书
爱情保证书大全
2014/04/29 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
python实现简易名片管理系统
2021/04/11 Python
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
Ruby处理YAML和json数据
2022/04/18 Ruby