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中巧用cssText属性批量操作样式
Mar 13 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
JavaScript数值转换的三种方式总结
Jul 31 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 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循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
php中rename函数用法分析
2014/11/15 PHP
jQuery 操作option的实现代码
2011/03/03 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
Python删除空文件和空文件夹的方法
2015/07/14 Python
轻松实现python搭建微信公众平台
2016/02/16 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
简述Python2与Python3的不同点
2018/01/21 Python
python 用下标截取字符串的实例
2018/12/25 Python
django模板结构优化的方法
2019/02/28 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
python在地图上画比例的实例详解
2020/11/13 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
教师自我鉴定范文
2013/11/10 职场文书
土建施工员岗位职责
2014/07/16 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
计划生育责任书
2015/05/09 职场文书
七年级语文教学反思
2016/03/03 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
JavaScript异步操作中串行和并行
2021/11/20 Javascript
Python实现抖音热搜定时爬取功能
2022/03/16 Python