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>
复制
