一、问题描述
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元素
<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://blog.csdn.net/weixin_47278656/article/details/130022280
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_47388.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
