jQuery - 階層セレクタ
公開日：2018-12-10
更新日：2019-05-14
更新日：2019-05-14
1. 概要
階層セレクタで要素を指定します。
$(親 > 子)
$(親 子孫)
$(前 + 後)
$(前 ~ 兄弟)
2.1 親 > 子
親要素(#a)の直下にある <span> の文字を赤くします。
孫要素には影響しません。
孫要素には影響しません。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<div id="a">
<div id="a1">A-1</div>
<div id="a2">A-2</div>
<div>
<span id="a3">A-3</span><br /> <!-- 孫なので対象外 -->
<span id="a4">A-4</span><br /> <!-- 孫なので対象外 -->
</div>
<span id="a4">A-5</span><br /> <!-- 赤 -->
</div>
<!-- Script -->
<script>
$(function(){
$("#a > span").css("color", "red");
});
</script>
</body></html>
実行結果：画面
2.2 親 子孫
親要素(#a)配下の 全ての <span> の文字を赤くします。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<div id="a">
<div id="a1">A-1</div>
<div id="a2">A-2</div>
<div>
<span id="a3">A-3</span><br /> <!-- 赤 (孫も対象となる) -->
<span id="a4">A-4</span><br /> <!-- 赤 (孫も対象となる) -->
</div>
<span id="a5">A-5</span><br /> <!-- 赤 -->
</div>
<!-- Script -->
<script>
$(function(){
$("#a span").css("color", "red");
});
</script>
</body></html>
実行結果：画面
2.3 前 + 後
同じ階層にある並んだ２つの要素のうち、後ろにある要素の文字を赤くします。
前後の関係がない場合は対象外となります。
前後の関係がない場合は対象外となります。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<div id="a">
<div id="a1">A-1</div>
<div id="a2">A-2</div>
<div id="a3">
<span id="a3-1">A3-1</span><br />
<span id="a3-2">A3-2</span><br />
</div>
<div id="a4">A-4</div> <!-- 赤 -->
<div id="a5">A-5</div>
</div>
<!-- Script -->
<script>
$(function(){
$("#a3 + div").css("color", "red");
});
</script>
</body></html>
実行結果：画面
2.4 前 ~ 兄弟
同じ階層の、指定した要素以降にある要素の文字を赤くします。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<div id="a">
<div id="a1">A-1</div>
<div id="a2">A-2</div>
<div id="a3"> <!-- 赤 -->
<span id="a3-1">A3-1</span><br />
<span id="a3-2">A3-2</span><br />
</div>
<span id="a4">A-4</span><br />
<div id="a5">A-5</div> <!-- 赤 -->
</div>
<!-- Script -->
<script>
$(function(){
$("#a2 ~ div").css("color", "red");
});
</script>
</body></html>
実行結果：画面
