jQuery find（）の例

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

jQueryを使うと、 `find（）`を使ってすべての子孫（子、孫、曾孫…どんなレベルでも）を検索することができます。

例えば、3つのレベルの深さを持つ `div`要素です。

<div id="A1">

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

    <div id="A2">

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

        <div id="A3">

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

        </div>

    </div>

</div>

1. $（ ‘＃A1’）. find（ ‘. child’）

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

“A1″のIDを含む要素と、 ”

child

“というクラス名を含む子要素を見つけ、背景を赤に変更します。

2. $（ ‘＃A2’）. find（ ‘. child’）

$('#A2').find('.child').css('background','red');

“A2″のIDを含む要素と、 ”

child

“というクラス名を含む子要素を見つけ、その背景を赤に変更します。

3. jQuery find（）の例

この例を再生します。

HTMLの例

<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 find() example</h1>

<script type="text/javascript">

  $(document).ready(function(){

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

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

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

    });

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

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

    $('#A2').find('.child').css('background','red');

    });

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

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

    $('#A3').find('.child').css('background','red');

    });

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

<div id="A1">A1
    <div class="child">A1-1</div>
    <div class="child">A1-2</div>

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

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

</div>

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

<input type='button' value='find #A1' id='button1'>
<input type='button' value='find #A2' id='button2'>
<input type='button' value='find #A3' id='button3'>

</body>
</html>

リファレンス

jQuery find（）API documentation

jquery

jquery
トラバース

getdocs

13036