ありとあらゆる要素を取得することができます。そう、iPhoneならね
セレクタでは弟要素・子要素・孫要素の指定だけでした。
jQuery関数を使用すると全パターンの要素を取得することができます。
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> */ });