階層フィルタ

メモ

  • 親子・兄弟等の階層により要素を選択
    • 子要素：指定した親子関係となる、子要素を選択
    • 子孫要素：指定した先祖・子孫関係となる、子孫要素を選択
    • 隣接兄弟要素：同じ親を持ち指定した兄弟関係となる、兄要素の直後の弟要素を選択
    • 一般兄弟要素：同じ親を持ち指定した兄弟関係となる、兄要素より後の弟要素を選択

構文

【子要素】
jQuery( "parent【親要素セレクタ】 > child【子要素セレクタ】" ) 1.0


【子孫要素】
jQuery( "ancestor【先祖要素セレクタ】descendant【子孫要素セレクタ】" ) 1.0


【隣接兄弟要素】
jQuery( "prev【兄要素セレクタ】 + next【弟要素セレクタ】" ) 1.0


【一般兄弟要素】
jQuery( "prev【兄要素セレクタ】 ~ siblings【弟要素セレクタ】" ) 1.0

関連

例

【子要素】
<style>
#id1 li { color: black; }
</style>

<ol id="id1" style="color:black;">
  <li>子要素
  <li>子要素
  <li>子要素
  <ol>
    <li>孫要素
    <li>孫要素
  </ol>
  <li>子要素
  <li>子要素
</ol>

<script>
$( "#id1 > li" ).css( { color:"red", border:"2px red dashed" } );
</script>
  1. 子要素
  2. 子要素
  3. 子要素
    1. 孫要素
    2. 孫要素
  4. 子要素
  5. 子要素 
【子孫要素】
<style>
#id2 li { color: black; }
</style>

<ol id="id2">
  <li>子要素
  <li>子要素
  <li>子要素
  <ol>
    <li>孫要素
    <li>孫要素
  </ol>
  <li>子要素
  <li>子要素
</ol>

<script>
$( "#id2 li" ).css( { color:"red", border:"2px red dashed" } );
</script>
  1. 子要素
  2. 子要素
  3. 子要素
    1. 孫要素
    2. 孫要素
  4. 子要素
  5. 子要素 
【隣接兄弟要素】
<style>
#id3 li { color: black; }
</style>

<ol id="id3">
  <li>項目
  <li id="id31">兄要素 (基準)
  <li>弟要素
  <ol>
    <li>項目
    <li>項目
  </ol>
  <li>弟要素
  <li>弟要素
</ol>

<script>
$( "#id31 + li" ).css( { color:"red", border:"2px red dashed" } );
</script>
  1. 項目
  2. 兄要素 (基準)
  3. 弟要素
    1. 項目
    2. 項目
  4. 弟要素
  5. 弟要素 
【一般兄弟要素】
<style>
#id4 li { color: black; }
</style>

<ol id="id4">
  <li>項目
  <li id="id41">兄要素 (基準)
  <li>弟要素
  <ol>
    <li>項目
    <li>項目
  </ol>
  <li>弟要素
  <li>弟要素
</ol>

<script>
$( "#id41 ~ li" ).css( { color:"red", border:"2px red dashed" } );
</script>
  1. 項目
  2. 兄要素 (基準)
  3. 弟要素
    1. 項目
    2. 項目
  4. 弟要素
  5. 弟要素