【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」が5つ含まれています。
この中から「ul#hoge」をフックにしてjQueryの”.children()”メソッドで、下層の「li」5つを取得したいと思います。

“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()”メソッドの引数に条件を付与

children()は、引数に条件を指定することもできます。
例えば、複数存在する子要素の中から、特定の条件に当てはまる要素にだけ何かしらの処理を施したい場合は、下記のように記述します。

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

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

実行結果

  • テキスト
  • テキスト
  • テキスト
  • テキスト
  • テキスト

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

“.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を使ってサイトに動きをつけたい時に、よくお世話になるメソッドの一つです!サイトの制作に役立ててください!

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください