jQueryで子要素を取得するfindとchildrenの使い方【サンプル有】

2019年7月3日2019年8月4日

jQueryで子要素を操作する時の処理についてまとめました。

直下の子要素のみを指定する.children

.child()メソッドは、指定した要素の直下の子要素を指定できます。

下記のソースコードは、直下のli要素の文字を赤くする、という指定で処理をしています。

<ul class="ex01">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <ul>
        <li>リスト4-1</li>
        <li>リスト4-2</li>
        <li>リスト4-3</li>
    </ul>
    <li>リスト5</li>
    <li>リスト6</li>
</ul>

<script>
$(function(){
    $('.ex01').children('li').css('color', 'red');
    //$('.ex01 > li').css('color', 'red'); も同じ処理
});
</script>

あくまでセレクタの対象となるのは「直下」の要素なので、子孫要素になる「リスト4～」のli要素にはcssは適用されていません。

また、childrenメソッドを使わなくても、セレクタ上に直接子要素を指定することも出来ます。

$('.ex01 > li').css('color', 'red');

この書き方でも上記の例と同じになります。

しかし、.()で繋げる書き方をせざるを得ない時もありますので、.childrenメソッドも覚えておいてください。

子孫要素を含めて、子要素すべてを指定する.find()

.find()メソッドは、指定した要素の、子孫要素を含めたすべての子要素を指定できます。

下記のソースコードは、子孫要素を含む、すべてのli要素の文字を赤くする、という指定で処理をしています。

<ul class="ex02">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <ul>
        <li>リスト4-1</li>
        <li>リスト4-2</li>
        <li>リスト4-3</li>
    </ul>
    <li>リスト5</li>
    <li>リスト6</li>
</ul>

<script>
$(function(){
    $('.ex02').find('li').css('color', 'red');
    //$('.ex01 li').css('color', 'red'); も同じ処理
});
</script>

cssを書くように、下記のように指定しても同じ処理が実行できます。

$('.ex01 li').css('color', 'red');

子要素の数を取得する

findまたはchildrenを使用し、メソッドチェーンで.lengthを指定することで、子要素の数を取得できます。

<ul class="ex03">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <ul>
        <li>リスト4-1</li>
        <li>リスト4-2</li>
        <li>リスト4-3</li>
    </ul>
    <li>リスト5</li>
    <li>リスト6</li>
</ul>

<p class="ex03_result"></p>

<script>
$(function(){
    var find_cnt = $('.ex03').find('li').length;
    var children_cnt = $('.ex03').children('li').length;

    $('.ex03_result').text('直下の子要素の数は' + children_cnt + '個で、すべての子要素の数は' + find_cnt + '個です。');
});
</script>

子要素があるかないかを判定する

指定した要素に特定の子要素があるか判定する場合でも、lengthが使えます。

子孫要素も含めたすべての子要素の有無が判定となります。

<ul class="ex04">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <ul>
        <li class="hoge">リスト4-1</li>
        <li>リスト4-2</li>
    </ul>
    <li>リスト5</li>
    <li>リスト6</li>
</ul>

<p class="ex04_result"></p>

<script>
$(function(){
    if($('.ex04').find('.hoge').length > 0){
        $('.ex04_result').text('.hogeが見つかりました。');
    }else{
        $('.ex04_result').text('.hogeが見つかりません。');
    }
});
</script>

以上、jQueryで子要素を取得するfindとchildrenの使い方、でした。