jQueryで親要素や子要素を取得する方法

Tweet

jQueryで親要素や子要素を取得する方法をまとめてみました。

なんだかんだで書いておかないと忘れてしまうので。。。

親要素を取得する

• parent([条件等])

直近の親要素のみを取得し、1つ上以上の親を探さない。
条件を書かなければ直近の親要素を、条件を書くと条件に一致する場合は要素が、一致しない場合は空の配列が返ってくる

例） #content の親要素である div を取得する

$("#content").parent();

<div>
    <div id="content"></div>
</div>

• parents([条件等])

直近の親だけでなくその親、その親・・・というように上位にあるタグを検索してくれる。
parentと同じく条件に一致すればその要素が、条件に一致しない場合は空の配列が返ってくる

例）#content から親の table を取得する

$("#content").parents('table');

<table>
    <tr>
        <td id="content"></td>
    </tr>
</table>

• closest([条件等])

最も近い条件のものを取得する。
間に色々なタグが入っていても関係なし。
条件を指定しない場合は空の配列が、条件にあてはある場合はその要素が配列で返ってくる。

例）#contentから一番近い table を取得する

$("#content").closest("table");

<table>
    <tr>
        <td><p id="content"></p></td>
    </tr>
</table>

子要素を取得する

• children([条件等])

その要素の子要素のみ取得する。子孫は取ってこない。
条件にあてはまる場合はその要素が、あてはまらない場合は空の配列で返ってくる。

例） 子要素の span を取得する （p に囲まれた span は取得出来ない）

$("#content").children("span");

<div id="content">
    <span>取得出来る</span>
    <p><span>取得出来ない</span></p>
</div>

• find([条件等])

子要素だけじゃなく全ての子孫から取得可能。
条件にあてはまるもの全てを取得する。条件にあてはまらない場合は空の配列が返ってくる。

例）子要素の span を取得する （children のときと同じ例。ただし今回はどちらの span も取得出来る）

$("#content").find("span");

<div id="content">
    <span>取得出来る</span>
    <p><span>取得出来る</span></p>
</div>

• contents()

テキストノードを含めた全ての子要素を取得する。
条件を入れた場合 children と同じ動きをする

最後に

jQueryを使って長いですが、未だにちょくちょくしか使わないためメソッド名と使い方が覚えられない。。。
ということでメモ記事でした。誰かの参考になれば！！

この本読んでみたい

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

posted with amazlet at 14.01.25

Cody Lindley
オライリージャパン
売り上げランキング: 13,081

Amazon.co.jpで詳細を見る

更新情報はFacebookページで！

ブログの更新、読んで役立つ他ブログの記事などを更新しています。

Tweet