jQuery获取某元素的上一个、下一个、父元素、子元素元素（学习笔记）

本文介绍: jQue ry 获取某元素的上一个、下一个、父元素、子元素

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	<meta charset="utf-8"&gt;
	<title&gt;Title</title&gt;
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"&gt;</script>
</head>
<body>
	<div id="parent">
		<div id="firstSon">
			<span id="notSelect">其他</span>
		</div>
		<div id="secondSon">
			<div id="nowSelect">
				<span id="grandSon">当前</span>
			</div>
		</div>
			<div id="firstSon">
			<span id="notSelect">其他</span>
		</div>
	</div>
</body>
</html>

使用jQuery 语句的JS代码：

<script>
	var selectObj = $("#nowSelect");
	console.log(selectObj[0]);
</script>

运行结果：

<div id="nowSelect">
	<span id="grandSon">当前</span>
</div>

代码：

<script>
	var selectObj = $("#nowSelect").parent();
	console.log(selectObj[0]);
</script>

运行结果：

<div id="secondSon">
	<div id="nowSelect">
		<span id="grandSon">当前</span>
	</div>
</div>

注：
（1）jQuery.parents(expr)类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素；
（2）jQuery.parent()可以传入expr进行过滤（jQuery.parent(expr)），比如$("span").parent()或者$("span").parent(".class").

代码：

<script>
	var selectObj = $("#nowSelect").children();
	console.log(selectObj[0]);
</script>

<span id="grandSon">当前</span>

<script>
	var selectObj = $("#nowSelect").parent().prev();
	console.log(selectObj[0]);
</script>

<div id="firstSon">
	<span id="notSelect">其他</span>
</div>

注：jQuery.prevAll()返回所有之前的兄弟节点

<script>
	var selectObj = $("#nowSelect").parent().next();
	console.log(selectObj[0]);
</script>

<div id="thirdSon">
	<span id="notSelect">其他</span>
</div>

注：jQuery.nextAll()返回所有之后的兄弟节点

<script>
	var selectObj = $("#grandSon").closest("div");
	console.log(selectObj[0]);
</script>

<div id="nowSelect">
	<span id="grandSon">当前</span>
</div>

<script>
	var selectObj = $("#parent div").first();
	console.log(selectObj[0]);
</script>

<div id="firstSon">
	<span id="notSelect">其他</span>
</div>

<script>
	var selectObj = $("#parent div").last();
	console.log(selectObj[0]);
</script>

<div id="thirdSon">
	<span id="notSelect">其他</span>
</div>

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

jquery 元素获取

jQue r y 获取某元素的上一个、下一个、父元素、子元素

一、问题 描述

1.首先是这样一个HTML结构：

2.首先jQue r y 选择器 指向id=”nowSelect”的那个div 元素

二、获取其他元素

1.获取其父元素（.p arent()）

2.获取其子元素（.children()）

3.获取其上一个元素（.prev()）

4.获取其下一个元素（.next()）

5.获取其最近的一个属性为XXX的元素(.close st())

三、其他

1.查找同一父亲的第一个子元素（.first()）

2.查找同一父亲的最后一个子元素（.last()）

发表回复取消回复

jQuery获取某元素的上一个、下一个、父元素、子元素

一、问题描述

1.首先是这样一个HTML结构：

2.首先jQuery选择器指向id=”nowSelect”的那个div元素

二、获取其他元素

1.获取其父元素（.parent()）

2.获取其子元素（.children()）

3.获取其上一个元素（.prev()）

4.获取其下一个元素（.next()）

5.获取其最近的一个属性为XXX的元素(.closest())

三、其他

1.查找同一父亲的第一个子元素（.first()）

2.查找同一父亲的最后一个子元素（.last()）

相关文章

发表回复 取消回复

jQue r y 获取某元素的上一个、下一个、父元素、子元素

2.首先jQue r y 选择器指向id=”nowSelect”的那个div 元素

1.获取其父元素（.p arent()）

5.获取其最近的一个属性为XXX的元素(.close st())

发表回复取消回复