2011/05/23

jQuery親要素、子要素、兄弟要素取得のまとめ

※各メソッドにかいてある[条件]ってのは、タグ名やid、クラス名を指定するってことです。
条件を入れると、条件にあったものだけが取得されるようになります。
例:$(elem).parent("div.class-name, #id");
通常のJavaScriptでの要素取得方法は→[JavaScript] 親要素・子要素・兄弟要素の取得方法


■親要素の取得

parent([条件])
親要素の取得。
すぐ上の親要素のみ。さらに上の先祖要素にはさかのぼらない。
$(elem).parent("div");
親要素がdivだったら親要素が取得できる。divじゃなければ空。

parents([条件])
parent()と違い親より上の先祖要素までさかのぼる。
$(elem).parents(".class-name");
class-nameというクラス名がついた先祖要素のみ取得

closest([条件])
最も近い先祖要素を取得
$(elem).closest("div");
で一番近いdivを取得。間にpタグなんかあっても無視。


■子要素の取得

children([条件])
全ての子要素を取得。
対象は子要素のみ。孫要素以下は対象外。
$(elem).children("span");
子要素のspanだけ取得

contents()
テキストノードを含めた子要素を全部取得する。
条件をつけることはできない。

find([expr])
子要素だけじゃなく、全子孫要素が対象。
条件を入れた場合は、条件にあった子孫要素だけ取得
$(elem).find("div");
子孫要素のdivだけ取得。


■兄弟要素の取得

next([条件]);
すぐ次にある要素を取得する。
取得する要素は、すぐ次にある1つだけ。
当然、自分の前にあるものは取得しない

nextAll([条件])
次以降にある全要素を取得する

prev([条件])
next()の逆。
自分のすぐ前にある要素を1つだけ取得。

prevAll([条件])
前にある要素を全部取得。
もちろん条件も付けられる


1 件のコメント: