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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
浅谈js数组splice删除某个元素爬坑
Oct 14 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
Linux下PHP连接Oracle数据库
2014/08/20 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
js 金额文本框实现代码
2012/02/14 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
详解Django通用视图中的函数包装
2015/07/21 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
python绘制立方体的方法
2018/07/02 Python
python构建基础的爬虫教学
2018/12/23 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
python识别验证码图片实例详解
2020/02/17 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
教师找工作推荐信
2013/11/23 职场文书
化学教师自荐信范文
2013/12/28 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
服务员岗位职责
2015/02/03 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
Spring实现内置监听器
2021/07/09 Java/Android
Nginx报404错误的详细解决方法
2022/07/23 Servers