jQuery - 階層セレクタ

公開日：2018-12-10 更新日：2019-05-14
[jQuery]

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>

実行結果：画面



Tag

New Article