jQueryで子要素・孫要素を取得する方法

HTML

<ul class="parent">
  <li class="child">子どもA
    <div class="grand-child">孫A</div>
  </li>
  <li class="child">子どもB
    <div class="grand-child">孫B</div>
  </li>
  <li class="child">子どもC</li>
</ul>

children() … 直下の子要素を取得

$('.parent').children(); // 直下の子要素を取得

find() … 特定のクラスを持つ子孫要素を取得

$('.parent').find('.grand-child'); // 特定のクラスを持つ子孫要素を取得

シンプルにセレクタ指定

$('.parent li'); // li要素（子孫要素すべて）取得
$('.parent > li'); // 直下のli要素を取得

何番目の子要素かの指定

$('.parent li:first'); // 最初の子要素取得
$('.parent li:last'); // 最後の子要素取得
$('.parent li:nth-child(2)'); // 2番目の子要素取得
$('.parent li:nth-child(n+2)'); // 2番目以降の子要素取得