jQuery - セレクタ

下記HTMLの各要素を取得、操作することで、jQueryにはどのようなセレクタがあるかをまとめる。

  <p>jQueryのセレクタ</p>
  <ul id="main">
    <li class="item">1</li>
    <li>2
      <ul id="sub">
        <li class="item">2-1</li>
        <li class="item">2-2</li>
      </ul>
    </li>
  </ul>

> 直下の子要素

$('#mail > .item').css('color', 'red')

• 「1」のみが赤文字になる
• 「2-1」「2-2」は赤文字にならない

(空白) それ以下の要素

$('#mail .item').css('color', 'red')

• 「1」「2-1」「2-2」全てが赤文字になる
• 「2-1」「2-2」だけでなく、それ以下には「1」も含まれる

, 複数の要素

$('p, .item').css('color', 'red')

• .item要素だけでなく、p要素も赤文字になる

+ 隣接する要素

$('.item + .item').css('color', 'red')

• .item要素の隣にある.item要素、この場合だと「2-2」のみ赤文字になる