parent (親要素の取得)

引数を指定することができ、取得親要素の絞り込み条件を指定できます。
親以上の先祖は対象になりません。

$(function() {
 // testCクラスの親で.ptestクラスが付与されているものに.abababを付与
 $('.thisC').parent('.ptest').addClass('ababab');
/*
<div>
 <div class="ptest ababab">
  <div class="thisC">
  </div>
 </div>
 <div class="ptest2">
  <div class="thisC">
  </div>
 </div>
</div>
 */


 // testCクラスの親全てに.abababを付与
 $('.thisC').parent().addClass('ababab');
/*
<div>
 <div class="ptest ababab">
  <div class="thisC">
  </div>
 </div>
 <div class="ptest2 ababab">
  <div class="thisC">
  </div>
 </div>
</div>
 */
});

parents (先祖要素の取得)

引数には条件を指定することができ、取得先祖要素を絞り込むことができます。

$(function() {
 // testCクラスの先祖要素全で.ptestクラスが付与されているものに.abababを付与
 $('.thisC').parents('.ptest').addClass('ababab');
/*
<div>
 <div class="ptest ababab">
  <div class="ptest ababab">
   <div class="thisC"></div>
  </div>
 </div>
</div>
*/

 // testCクラスの先祖全てに.abababを付与
 $('.thisC').parents().addClass('ababab');
/*
<div class="ababab">
 <div class="ptest ababab">
  <div class="ptest ababab">
   <div class="thisC"></div>
  </div>
 </div>
</div>
 */
});

closest (最初に一致した先祖要素を取得)

parentsは全ての先祖が対象でしたが、最初に出現したものだけを取得することができます。
これも引数は条件を指定することができます。

$(function() {
// testCクラスの先祖要素全で.ptestクラスが付与されているものに.abababを付与
$('.thisC').closest('.ptest').addClass('ababab');
/*
<div>
 <div class="ptest">
  <div class="ptest ababab">
   <div>
    <div class="thisC"></div>
   </div>
  </div>
 </div>
</div>
*/

// testCクラスの先祖全てに.abababを付与
$('.thisC').closest().addClass('ababab');
/*
<div>
 <div class="ptest">
  <div class="ptest">
   <div class="ababab">
    <div class="thisC"></div>
   </div>
  </div>
 </div>
</div>
*/
});

children (直下にある子要素の取得)

子要素を取得します。子要素だけで、孫要素の取得はできません。
複数の子要素がある場合は、全ての子要素を取得します。
これも絞り込みの条件を付与することができます。

$(function() {
// testCクラスの子要素で.ptestクラスが付与されているものに.abababを付与
$('.thisC').children('.ptest').addClass('ababab');
/*
<div>
 <div class="thisC">
  <div class="ptest ababab"></div>
  <div></div>
  <div class="ptest ababab"></div>
 </div>
</div>
*/

// testCクラスの子要素全てに.abababを付与
$('.thisC').children().addClass('ababab');
/*
<div>
 <div class="thisC">
  <div class="ptest ababab"></div>
  <div class="ababab"></div>
  <div class="ptest ababab"></div>
 </div>
</div>
*/
});

contents (テキストノードを含む全てを取得)

ネイティブなJSのアレと同じく、テキスト、空白、改行など全てのノードを取得します。
これは条件を入れることができません。

$(function() {
// testCクラスの子・孫要素をとにかく全部取得。addClassは対応できるものだけ動くためエラーにはならない
$('.thisC').contents().addClass('ababab');
/*
<div>
 <div class="thisC">
  <div class="ptest ababab"></div>
  <div></div>
  <div class="ptest ababab"></div>
 </div>
</div>
*/
});

find (全ての子・孫要素を取得)

子・孫要素を全て取得することができます。findに関しては、条件指定が必須となります。

$(function() {
// testCクラスの子・孫要素のうち、.ftestが付与されているものにクラス追加
$('.thisC').find('.ftest').addClass('ababab');
/*
<div>
 <div class="thisC">
  <div class="ftest ababab">
   <div class="ftest ababab"></div>
  </div>
  <div>
   <div class="ftest ababab"></div>
  </div>
  <div class="ptest ababab">
   <div class="test"></div>
  </div>
 </div>
</div>
*/
});

next (すぐ隣りの弟要素の取得)

すぐ隣の弟要素を取得します。
取得した要素以降は取得しません。
これも絞り込みの条件を付与することができます。

$(function() {
// testCクラスの隣の要素で.ntestが付与されている要素にクラスを付与します。
$('.thisC').next('.ntest').addClass('ababab');
/*
<div>
 <div class="thisC"></div>
 <div class="ntest ababab"></div>
 <div class="aaaaa"></div>
 <div class="ntest"></div>
</div>
*/


// testCクラスの隣の要素にクラスを付与します。
$('.thisC').next().addClass('ababab');
/*
<div>
 <div class="thisC"></div>
 <div class="ntest ababab"></div>
 <div class="aaaaa"></div>
 <div class="ntest"></div>
 <div class="thisC"></div>
 <div class="aaaaa ababab"></div>
</div>
*/
});

nextAll (弟要素の全取得)

全ての弟要素を取得します。
これも絞り込みの条件を付与することができます。

$(function() {
// testCクラスの隣の要素で.ntestが付与されている要素全てにクラスを付与します。
$('.thisC').nextAll('.ntest').addClass('ababab');
/*
<div>
 <div class="thisC"></div>
 <div class="ntest ababab"></div>
 <div class="aaaaa"></div>
 <div class="ntest ababab"></div>
</div>
*/


// testCクラスの隣の要素全てにクラスを付与します。
$('.thisC').nextAll().addClass('ababab');
/*
<div>
 <div class="thisC"></div>
 <div class="ntest ababab"></div>
 <div class="aaaaa ababab"></div>
 <div class="ntest ababab"></div>
 <div class="thisC ababab"></div>
 <div class="aaaaa ababab"></div>
</div>
*/
});

prev (すぐ隣りの兄要素の取得)

すぐ隣の兄要素を取得します。
取得した要素以降は取得しません。
これも絞り込みの条件を付与することができます。

$(function() {
// testCクラスの隣の要素で.ntestが付与されている要素にクラスを付与します。
$('.thisC').prev('.ntest').addClass('ababab');
/*
<div>
 <div class="ntest"></div>
 <div class="aaaaa"></div>
 <div class="ntest ababab"></div>
 <div class="thisC"></div>
</div>
*/


// testCクラスの隣の要素にクラスを付与します。
$('.thisC').prev().addClass('ababab');
/*
<div>
 <div class="ntest"></div>
 <div class="aaaaa"></div>
 <div class="ntest ababab"></div>
 <div class="thisC"></div>
 <div class="aaaaa ababab"></div>
 <div class="thisC"></div>
</div>
*/
});

prevAll (兄要素の全取得)

全ての兄要素を取得します。
これも絞り込みの条件を付与することができます。

$(function() {
// testCクラスの隣の要素で.ntestが付与されている要素全てにクラスを付与します。
$('.thisC').prevAll('.ntest').addClass('ababab');
/*
<div>
 <div class="ntest ababab"></div>
 <div class="aaaaa"></div>
 <div class="ntest ababab"></div>
 <div class="thisC"></div>
</div>
*/


// testCクラスの隣の要素全てにクラスを付与します。
$('.thisC').prevAll().addClass('ababab');
/*
<div>
 <div class="ntest ababab"></div>
 <div class="aaaaa ababab"></div>
 <div class="ntest ababab"></div>
 <div class="thisC ababab"></div>
 <div class="aaaaa ababab"></div>
 <div class="thisC"></div>
</div>
*/
});