首页
所有分类
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 相关文章推荐
jQuery 自定义函数写法分享
Mar 30 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 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
IIS7(1) 磁盘分区(1) DBLink(1) 复读(1) GZIP(2) 幻读(5) .NET Framework(2) DNS服务器(2) 事务并发(1) FTP服务器(1)
You might like
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
node.js中路由，中间件，ge请求和post请求的参数详解
2017/12/26 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
了解javascript中的Dom操作
2019/05/27 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
Python字符串格式化
2015/06/15 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
python写程序统计词频的方法
2019/07/29 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
Python过滤序列元素的方法
2020/07/31 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
巴西Mr. Cat在线商店：购买包包和鞋子
2019/09/08 全球购物
C语言面试题
2013/05/19 面试题
小车司机岗位职责
2013/11/25 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL