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

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

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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 遍历同胞、jquery遍历后代、jquery同胞元素、jquery获取同胞元素，以便于您获取更多的相关知识。

时间： 2024-12-13 09:46:31

JQuery遍历元素的后代和同胞实现方法_jquery的相关文章

JQuery遍历元素的父辈和祖先的方法_jquery

JQuery遍历首先我们要知道什么是父亲,儿子,后代,同胞,祖先 •<div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先. •<ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素 •左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代. •<span> 元素是 <li> 的子元素,同时是 <

本文实例讲述了jQuery遍历json中多个map的方法.分享给大家供大家参考.具体实现方法如下: jQuery.each(data.root,function(key,value){ for(var i = 0 ; i < value.length; i++ ){ var tmpArr = []; var obj = value[i]; //tmpArr.push(obj["collectDate"]); tmpArr.push(3*i); tmpArr.push(obj[&q

jQuery操作元素css样式的三种方法_jquery

我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的:而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通,但是却节省了许多代码.还是那句话 - "jQuery让JavaScript代码变得简洁!" 1. addClass() - 添加CSS类 $("#target").addClass(&q

jquery中子元素和后代元素的区别示例介绍

后代,就是当前元素的所有后代,都算,子元素,就是当前元素的子集,再往下走就不算了今天学习jQuery的选择器: jQuery选择器分为基本选择器.层次选择器.过滤选择器.表单选择器. 基本选择器:id,class,标签名,*,元素组合(div,span,p.myClass) 层次选择器: 难点: jquery中子元素和后代元素的区别后代,就是当前元素的所有后代,都算, 子元素,就是当前元素的子集,再往下走就不算了. 具体的分析可以参考: 代码如下: <d

jquery中子元素和后代元素的区别示例介绍_jquery

今天学习jQuery的选择器: jQuery选择器分为基本选择器.层次选择器.过滤选择器.表单选择器. 基本选择器:id,class,标签名,*,元素组合(div,span,p.myClass) 层次选择器: 难点: jquery中子元素和后代元素的区别后代,就是当前元素的所有后代,都算, 子元素,就是当前元素的子集,再往下走就不算了. 具体的分析可以参考: 复制代码代码如下: <div>This is <strong>very</strong> important

jQuery遍历json中多个map的方法

这篇文章主要介绍了jQuery遍历json中多个map的方法,涉及jQuery循环的技巧与针对map的遍历方法,需要的朋友可以参考下本文实例讲述了jQuery遍历json中多个map的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 jQuery.each(data.root,function(key,value){ for(var i = 0 ; i < value.length; i++ ){ var tmpArr = []; v

Jquery遍历元素更改class属性

js实例代码如下复制代码 <style type="text/css"> *{margin:0;padding:0;} .demonstrate{padding:20px;} .description h3{color:#900;padding:8px 0;} .description p{ line-height:23px;} #demo{width:550px;padding:5px;border:1px #f00 solid;float:left;} #demo

jQuery实现form表单元素序列化为json对象的方法_jquery

本文实例讲述了jQuery实现form表单元素序列化为json对象的方法.分享给大家供大家参考,具体如下: 这段代码序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>jQuery扩展--form序列化到json对象</title> <meta http-equiv=Content-Type content=&

jQuery获取页面元素绝对与相对位置的方法_jquery

本文实例讲述了jQuery获取页面元素绝对与相对位置的方法.分享给大家供大家参考.具体如下: 获取页面某一元素的绝对X,Y坐标,可以用offset()方法: var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 获取相对(父元素)位置: var X = $('#DivID').position().top; var Y = $('#DivID').position().left; var pleft = $("s