jQueryのchildren（）の例

投稿日: 2019-11-05 2019-11-05
タグ: jquery, jquery traversing

jQueryでは、一致する要素の子を見つけるために

children（）

が使用されます。

例えば、深さが3レベルのdiv要素には、 “child”と “orphan”というクラス名が含まれています。

<div class="A1">
    <div class="child">A1-1</div>
    <div class="child">A1-2</div>
    <div class="orphan">A1-3</div>
    <div class="child">A1-4</div>

    <div class="A2">
        <div class="child">A2-1</div>
        <div class="child">A2-2</div>

        <div class="A3">
            <div class="child">A3-1</div>
            <div class="child">A3-2</div>
        </div>
    </div>

</div>

1. $（ ‘. A1’）. children（）

$('.A1').children().css('background','red');

クラス名「

A1

」とすべての

A1

「

単一レベルの子

」を含む要素に一致させます。

P.S A2とA3の子供は無視されます.

2. $（ ‘. A1’）. 子供（ ‘. 子供’）

$('.A1').children('.child').css('background','red');

クラス名が「

A1

」である要素に一致させ、クラス名が「child」である「

A1

」子で検索します。この例では、クラス名が “orphan”の子を除くすべてのA1 “単一レベルの子”が選択されます** 。

jQueryのchildren（）の例

<html>
<head>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
    div{
        padding:8px;
        border:1px solid;
    }
</style>

</head>

<body>

<h1>jQuery children() example</h1>

<script type="text/javascript">

  $(document).ready(function(){

    $("#buttonChildren1").click(function () {

    $('div').css('background','white');

    $('.A1').children().css('background','red');

    });

    $("#buttonChildren2").click(function () {

    $('div').css('background','white');

    $('.A1').children('.child').css('background','red');

    });

  });
</script>
</head><body>

<div class="A1">
    <div class="child">A1-1</div>
    <div class="child">A1-2</div>
    <div class="orphan">A1-3</div>
    <div class="child">A1-4</div>

    <div class="A2">
        <div class="child">A2-1</div>
        <div class="child">A2-2</div>

        <div class="A3">
            <div class="child">A3-1</div>
            <div class="child">A3-2</div>
        </div>
    </div>

</div>

<br/>
<br/>
<br/>

<input type='button' value='.A1 children()' id='buttonChildren1'>
<input type='button' value='.A1 children(child)' id='buttonChildren2'>

</body>
</html>

デモを試してください

jquery

jquery
トラバース

getdocs

13036