首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JQuery遍历元素的后代和同胞实现方法

Posted in Javascript onSeptember 18, 2016

1.遍历后代

children()

children() 方法返回被选元素的所有直接子元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("#div1").children().each(function(i, e) {
    $("#info").html($("#info").html()+"第"+i+"个直接后代是,("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="点击" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</div>
 </div>
 </div>
 <p id="p1"></p>
 <p id="p2"></p>
 <span id="span1"></span>
 <span id="span2"></span>
 <p id="p3"></p>
</div>

</body>
</html>

JQuery遍历元素的后代和同胞实现方法

find()

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

find()里必须加上selecter 如果不加就显示不了

所以里面必须加选择器 例如find("*") find("span")

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("#div1").find("*").each(function(i, e) {
    $("#info").html($("#info").html()+"第"+i+"个后代是,("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="点击" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</div>
 </div>
 </div>
 <p id="p1"></p>
 <p id="p2"></p>
 <span id="span1"></span>
 <span id="span2"></span>
 <p id="p3"></p>
</div>

</body>
</html>

JQuery遍历元素的后代和同胞实现方法

2.遍历同胞

siblings()

siblings() 方法返回被选元素的所有同胞元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("#div2").siblings().each(function(i, e) {
    $("#info").html($("#info").html()+"第"+i+"个同胞是,("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="点击" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</div>
 </div>
 </div>
 <p id="p1"></p>
 <p id="p2"></p>
 <span id="span1"></span>
 <span id="span2"></span>
 <p id="p3"></p>
</div>

</body>
</html>

JQuery遍历元素的后代和同胞实现方法

next()

next()被选元素的下一个同胞元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("#p2").next().each(function(i, e) {
    $("#info").html($("#info").html()+"第"+i+"个同胞是,("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="点击" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</div>
 </div>
 </div>
 <p id="p1"></p>
 <p id="p2"></p>
 <span id="span1"></span>
 <span id="span2"></span>
 <p id="p3"></p>
</div>

</body>
</html>

JQuery遍历元素的后代和同胞实现方法

nextAll()

nextAll() 方法返回被选元素的所有跟随的同胞元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("#p2").nextAll().each(function(i, e) {
    $("#info").html($("#info").html()+"第"+i+"个同胞是,("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="点击" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</div>
 </div>
 </div>
 <p id="p1"></p>
 <p id="p2"></p>
 <span id="span1"></span>
 <span id="span2"></span>
 <p id="p3"></p>
</div>

</body>
</html>

JQuery遍历元素的后代和同胞实现方法

nextUntil()

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("#p2").nextUntil("#p3").each(function(i, e) {
    $("#info").html($("#info").html()+"第"+i+"个同胞是,("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="点击" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</div>
 </div>
 </div>
 <p id="p1"></p>
 <p id="p2"></p>
 <span id="span1"></span>
 <span id="span2"></span>
 <p id="p3"></p>
</div>

</body>
</html>

JQuery遍历元素的后代和同胞实现方法

prev()

prev()
prevAll()
prevUntil()
prev=previous=前面的

所以遍历的是指定元素的前面同胞 这个效果和next() 相仿 就不举例子了

3.过滤

first()

first() 方法返回被选元素的首个元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("div p").first().each(function(i, e) {
    $("#info").html($("#info").html()+"("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="点击" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</div>
 </div>
 </div>
 <p id="p1"></p>
 <p id="p2"></p>
 <span id="span1"></span>
 <span id="span2"></span>
 <p id="p3"></p>
</div>

</body>
</html>

JQuery遍历元素的后代和同胞实现方法

last()

last() 方法返回被选元素的最后一个元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("div p").last().each(function(i, e) {
    $("#info").html($("#info").html()+"("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="点击" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</div>
 </div>
 </div>
 <p id="p1"></p>
 <p id="p2"></p>
 <span id="span1"></span>
 <span id="span2"></span>
 <p id="p3"></p>
</div>

</body>
</html>

JQuery遍历元素的后代和同胞实现方法

eq()

eq() 方法返回被选元素中带有指定索引号的元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("div p").eq(1).each(function(i, e) {
    $("#info").html($("#info").html()+"("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="点击" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</div>
 </div>
 </div>
 <p id="p1"></p>
 <p id="p2"></p>
 <span id="span1"></span>
 <span id="span2"></span>
 <p id="p3"></p>
</div>

</body>
</html>

JQuery遍历元素的后代和同胞实现方法

filter()

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("div p").filter("#p2").each(function(i, e) {
    $("#info").html($("#info").html()+"("+$(this).attr("id")+")");
   });
 });
});
</script>

JQuery遍历元素的后代和同胞实现方法

not()

not() 方法返回不匹配标准的所有元素。

not() 方法与 filter() 相反。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("div p").not("#p2").each(function(i, e) {
    $("#info").html($("#info").html()+"("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="点击" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</div>
 </div>
 </div>
 <p id="p1"></p>
 <p id="p2"></p>
 <span id="span1"></span>
 <span id="span2"></span>
 <p id="p3"></p>
</div>

</body>
</html>

JQuery遍历元素的后代和同胞实现方法

以上这篇JQuery遍历元素的后代和同胞实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

JQuery遍历元素的后代和同胞实现方法

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
微信小程序的线程架构【推荐】
May 14 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 #Javascript
利用jquery实现瀑布流3种案例
Sep 18 #Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 #Javascript
移动端js触摸事件详解
Sep 18 #Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 #Javascript
jQuery向父辈遍历的简单方法
Sep 18 #Javascript
js字符串引用的两种方式(必看)
Sep 18 #Javascript
哥伦比亚购物网站(5) 奥地利购物网站(28) 泰国购物网站(30) 芬兰购物网站(10) 葡萄牙购物网站(13) 南非购物网站(8) 土耳其购物网站(10) 阿联酋购物网站(26) 荷兰购物网站(99) 欧洲购物网站(15)
You might like
PHP测试程序运行时间的类
2012/02/05 PHP
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
php动态绑定变量的用法
2015/06/16 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
javascript cookie的基本操作（添加和删除）
2017/07/24 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
python中zip和unzip数据的方法
2015/05/27 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
如何用Django处理gzip数据流
2021/01/29 Python
生态学毕业生自荐信
2013/10/27 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
小学三年级学生评语
2014/04/22 职场文书
团员个人总结
2015/02/26 职场文书
大学毕业生个人总结
2015/02/28 职场文书
创业计划书之便利店
2019/09/05 职场文书
mysql部分操作
2021/04/05 MySQL
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
python简单验证码识别的实现过程
2021/06/20 Python
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers