首页 前端知识 jQuery获取某元素的上一个、下一个、父元素、子元素元素(学习笔记)

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

2024-02-08 15:02:41 前端知识 前端哥 17 459 我要收藏

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

  • 一、问题描述
    • 1.首先是这样一个HTML结构:
    • 2.首先jQuery选择器指向id="nowSelect"的那个div元素
  • 二、获取其他元素
    • 1.获取其父元素(.parent())
    • 2.获取其子元素(.children())
    • 3.获取其上一个元素(.prev())
    • 4.获取其下一个元素(.next())
    • 5.获取其最近的一个属性为XXX的元素(.closest())
  • 三、其他
    • 1.查找同一父亲的第一个子元素(.first())
    • 2.查找同一父亲的最后一个子元素(.last())

一、问题描述

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Title</title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></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>

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

使用jQuery语句的JS代码:

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

运行结果:

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

二、获取其他元素

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

代码:

<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").

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

代码:

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

运行结果:

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

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

代码:

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

运行结果:

<div id="firstSon">
	<span id="notSelect">其他</span>
</div>
注:jQuery.prevAll()返回所有之前的兄弟节点

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

代码:

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

运行结果:

<div id="thirdSon">
	<span id="notSelect">其他</span>
</div>
注:jQuery.nextAll()返回所有之后的兄弟节点

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

代码:

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

运行结果:

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

三、其他

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

代码:

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

运行结果:

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

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

代码:

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

运行结果:

<div id="thirdSon">
	<span id="notSelect">其他</span>
</div>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1555.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!