【jQuery】指定した要素の直下の子要素を取得する方法

jQueryを使って子要素の取得をする方法をご紹介します。子要素の取得に使えるjQueryの関数には「.find()」や「.children()」がありますが、今回は”.children()”メソッドについてだけ書きます。

“.children()”メソッドを使って子要素を取得する方法

では早速、以下のHTMLのサンプルをもとに、”.children()”メソッドで子要素を取得する方法をご紹介します。

「ul#hoge」の下層に「li」が5つ存在します

<ul id="hoge">
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
</ul>

このHTMLでは、「ul#hoge」の下層に「li」が５つ含まれています。
この中から「ul#hoge」をフックにしてjQueryの”.children()”メソッドで、下層の「li」５つを取得したいと思います。

“children()”の使い方

「ul#hoge」の直下に存在する「li」要素を取得する場合は、$(‘要素名’)を使って取得した要素に対して、”.children()”メソッドを利用しるので下記のような記述になります。

子要素を取得するサンプルコード

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
   var lists = $("#hoge").children();
   // console.log(lists); の結果
   // [li, li, li, li, li]
})
</script>

変数”lists”の中にliが5つ入っていて、子要素の取得に成功していますね。

ちなみに、1行目に書いているのはjQueryのファイルの呼び出しで、ページではjQueryが呼び出されていないと「$」や「jQuery」が使えませんのでご注意ください。
また、コード全体を囲っている $(function(){ 処理 }); という記述は、DOMの読み込みができてから内側のコードを実行してくださいね。という意味になっています。よく使うことになるのでコピペしなくても書けるように覚えておきたいですね。

※以下の例から、jQueryの参照や発火するタイミングについての記述は省略します。

“.children()”メソッドの引数に条件を付与

「2番目のli」にだけ「css('color','red')」を適用

   $(要素).children('li:nth-child(2)').css('color','red');

“.children()”の引数に指定した２番めの要素だけ赤くなっているののが確認できるかと思います。

“.children()”メソッドでは取得できないケース

“.children()”メソッドでできることをいくつか紹介しましたので、今後は反対にできないことについても紹介しておきます。子要素にアクセスできる”.children()”メソッドは、指定した要素の直下に存在する子要素しか取得ができません。

「children()」でアクセスできる要素

<ul id="hoge">
    <li>可能</li>
    <li>可能
      <p>不可能</p>
    </li>
    <p>可能
      <span>不可能</span>
    </p>
</ul>

※「不可能」と記載している階層の要素は取得することができません。

ちょっとだけ「children()」の応用

何番目の要素か判別する

下記のようなHTML構造で「li」をクリックしたときに、それが何番目の要素にあたるのかを知りたい場合の記述を紹介します。

<ul id="hoge">
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
</ul>

$(要素).on('click',function(){
   var thisNum = $(this).parent().children().index(this);
});

終わりに

直下の子要素を簡単に取得できる”.children()”メソッドは、jQueryを使ってサイトに動きをつけたい時に、よくお世話になるメソッドの一つです！サイトの制作に役立ててください！