jQueryは要素の前、次、親要素、子要素を取得します。
1. 問題の説明
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>
2. 他の要素を取得する
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>
3. その他
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>