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 相关文章推荐
Backbone.js中的集合详解
Jan 14 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
javascript标准库(js的标准内置对象)总结
May 26 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
详细分析React 表单与事件
Jul 08 Javascript
基于vue中的scoped坑点解说
Sep 04 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 变量定义方法
2009/06/14 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
Python自动调用IE打开某个网站的方法
2015/06/03 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
道德模范先进事迹
2014/02/14 职场文书
陈欧的广告词
2014/03/18 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
关于诚信的活动方案
2014/08/18 职场文书
女生抽烟检讨书
2014/10/05 职场文书
创先争优承诺书
2015/01/20 职场文书
调任通知
2015/04/21 职场文书
单位政审意见范文
2015/06/04 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技