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

Pocket

どうも、中村です。
jQueryを使って子要素の取得をする方法をご紹介します。子要素の取得に使えるjQueryの関数には「.find()」と「.children()」がありますが、今回の記事では「.children()」に絞ってご紹介します。

子要素を取得する方法

下記のHTML構造のときに、「ul」の下層にあるHTMLを取得する方法を紹介します。

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

「children()」を利用する

「ul」の直下に存在する要素を取得する場合は、「children()」を利用して下記のように記述します。

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
   $("#hoge").children();
})
</script>

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

引数に条件を付与

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

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

実行結果

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

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

取得できないケース

「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()は直下の要素だけしか取得ができないので、ほとんどfind()に役割を持って行かれて使いドコロが難しいメソッドになっている気がします。

SNSでもご購読できます。