首页 / JQUERY / JQuery遍历元素的后代和同胞实现方法

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JQuery遍历元素的后代和同胞实现方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9764字，纯文字阅读大概需要14分钟。

内容图文

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遍历元素的后代和同胞实现方法全部内容，希望文章能够帮你解决JQuery遍历元素的后代和同胞实现方法所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/349541.html

来源：【匿名】

【上一篇】JQuery控制DIV的选取实现方法【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【JQuery遍历元素的后代和同胞实现方法】教程文章相关的互联网学习教程文章

jQuery隐藏和显示从上往下的实现方法

jquery 显示隐藏方法实现动画效果方向显示隐藏左上角到右下角show()hide()垂直向下slideDown()slideUp()水平与垂直两个方向toggle()垂直向上切换slideToggle()原文：https://www.cnblogs.com/shiazhen/p/11897969.html

有些公司手机网站开发不用第三方的jquery或者zeptio，直接用原生的javascript。原生javascript功能是蛮强大的，只不过部分属性不支持IE8以下浏览器。下面对jquery相关方法，如何用js来实现，做一些简单总结。元素操作Add Class//JQUERY $(el).addClass(className);//js//谷歌浏览器，火狐浏览器，IE8+if(el.classList)el.classList.add(className);elseel.className +=‘ ‘+ className;//谷歌浏览器，火狐浏览器，IE10+ el.classL...

JQuery表格内容过滤的实现方法

代码如下:[html]<!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>JQuery表格内容过滤</title> <style type="text/css"> table{ border:0;border-collapse:collapse;} div{font:normal 12px/17px Arial;} td{ fon...

jQuery表格行上移下移和置顶的实现方法_jquery【图】

我们在操作列表数据的时候，需要将数据行排列顺序进行调整，如上移和下移行，将行数据置顶等，这些操作都可以在前端通过点击按钮来完成，并且伴随着简单的动态效果，轻松实现表格数据排序。运行效果图：HTML 页面上是一个简单的数据表格，我们在数据行中分别放置“上移”，“下移”和“置顶”三个链接，并且分别定义三个class属性，我们来通过jQuery实现这些操作。HTML5获取地理位置定位信息 2015-04-25 上移下移置顶 CSS+Coo...

PHPjQuery表单,带验证具体实现方法_PHP教程【图】

Email检测,密码重复检测,可以用于表单发送的各种环境，例如发送反馈，注册帐号代码如下: Invalid Name: We want names with more than 3 letters! Invalid E-mail: Stop cowboy! Type a valid e-mail please :P ...

PHPjQuery表单,带验证具体实现方法_php实例【图】

PHPjQuery表单,带验证具体实现方法_PHP【图】

jQuery Email检测,密码重复检测,可以用于表单发送的各种环境，例如发送反馈，注册帐号代码如下: Invalid Name: We want names with more than 3 letters! Invalid E-mail: Stop cowboy! Type a valid e-mail please :P ...

PHP jQuery表单,带验证具体实现方法【图】

Email检测,密码重复检测,可以用于表单发送的各种环境，例如发送反馈，注册帐号代码如下:<div id="container"> <?if( isset($_POST[send]) && (!validateName($_POST[name]) || !validateEmail($_POST[email]) || !validatePasswords($_POST[pass1], $_POST[pass2]) || !validateMessage($_POST[message]) ) ):?> <div id="error"> <ul> <?if(!validateNa...

jQuery序列化form表单数据为JSON对象的实现方法

这篇文章主要介绍了jQuery序列化form表单数据为JSON对象的实现方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下 jquery提供的serialize方法能够实现。$("#searchForm").serialize();但是，观察输出的信息，发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串。serialize确实是能够解决一般的提交数据。但是有时我们需要的是一个object对象，而不是字符串（比如jqgrid r...

jquery中val函数重载的实现方法（附代码）

本篇文章给大家带来的内容是关于jquery中val函数重载的实现方法（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。所谓重载，就是一组相同的函数名，有不同个数的参数，在使用时调用一个函数名，传入不同参数，根据你的参数个数，来决定使用不同的函数！但是我们知道js中是没有重载的，因为后定义的函数会覆盖前面的同名函数，但是我们又想实现函数重载该怎么办呢？第一种方法：这种方法比较简单，给一个...

Jquery数字滚动切换插件实现方法

这次给大家带来Jquery数字滚动切换插件实现方法，Jquery数字滚动切换插件实现的注意事项有哪些，下面就是实战案例，一起来看一下。我们先来看示例：CSS.textC {position:absolute;width:500px;overflow:hidden;margin-top: 100px;line-height:30px;margin-left: 300px;height:30px; } .textC span {color: #13BEEC;font-size: 28px;font-weight: bold;font-family: Georgia, "Times New Roman", Times, serif;position: absolute; ...

php+jquery传递json数据实现方法

这次给大家带来php+jquery传递json数据实现方法，php+jquery传递json数据的注意事项有哪些，下面就是实战案例，一起来看一下。html页面：<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript">$(function(){$("#send").click(function(){var cont = $("input").serialize();$.ajax({url:ab.p...

jQuery焦点图横向滚动实现方法【图】

这次给大家带来jQuery焦点图横向滚动实现方法，jQuery焦点图横向滚动的注意事项有哪些，下面就是实战案例，一起来看一下。jQuery焦点图是一款满屏左右滚动，带左右按钮，带缩略图，支持自动轮播的焦点图代码。运行效果图：小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。为大家分享的jQuery满屏焦点图左右滚动特效代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml...

jqueryminiui表格控件与合并单元格实现方法【图】

这次给大家带来jquery miniui表格控件与合并单元格实现方法，jquery miniui表格控件与合并单元格实现的注意事项有哪些，下面就是实战案例，一起来看一下。表格：合并单元格参考示例：合并单元格调用方法：margeCells。如下代码：grid.on("load", onLoad ); function onLoad(e) { var grid = e.sender; var marges = [ { rowIndex: 1, columnIndex: 0, rowSpan: 1, colSpan: 2 }, { rowIndex: 3, columnIndex: 0, rowSpan: ...

jquery拖拽效果实现方法【图】

这次给大家带来jquery拖拽效果实现方法，jquery拖拽效果实现的注意事项有哪些，下面就是实战案例，一起来看一下。运行效果截图如下：点击此处查看在线演示效果。具体代码如下：html部分：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="tuo.js...

首页 / JQUERY / JQuery遍历元素的后代和同胞实现方法

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【JQuery遍历元素的后代和同胞实现方法】教程文章相关的互联网学习教程文章

jQuery隐藏和显示从上往下的实现方法

jquery属性的相关js实现方法【代码】

JQuery表格内容过滤的实现方法

jQuery表格行上移下移和置顶的实现方法_jquery【图】

PHPjQuery表单,带验证具体实现方法_PHP教程【图】

PHPjQuery表单,带验证具体实现方法_php实例【图】

PHPjQuery表单,带验证具体实现方法_PHP【图】

PHP jQuery表单,带验证具体实现方法【图】

jQuery序列化form表单数据为JSON对象的实现方法

jquery中val函数重载的实现方法（附代码）

Jquery数字滚动切换插件实现方法

php+jquery传递json数据实现方法

jQuery焦点图横向滚动实现方法【图】

jqueryminiui表格控件与合并单元格实现方法【图】

jquery拖拽效果实现方法【图】

JQUERY - 相关标签

元素 - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程