jquery/jquery-jquery-find-example/

および


children（）

** メソッドは、一致する子をフィルタリングするために使用されます前者が何らかのレベル下を移動することを除いて、後者は単一レベル下を移動する。

シンプルに


  1. find（）

    – 一致する要素の子、孫、

曾孫…​どんなレベルでも。


  1. children（）

    – 一致する要素の子のみを検索する（single

レベルダウン）。

find（）とchildren（）** の違いを理解するには、以下の例を参照してください。

jQuery find（）と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 find() vs children() example</h1>

<script type="text/javascript">

  $(document).ready(function(){

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

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

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

        });

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

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

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

        });

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

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

    <div class="B2">
        <div class="child">B2-1</div>
        <div class="child">B2-2</div>
        <div class="orphan">B2-2 - Orphan</div>

        <div class="B3">
            <div class="child">B3-1</div>
            <div class="orphan">B3-2 - Orphan</div>
            <div class="child">B3-3</div>
        </div>
    </div>

</div>

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

<input type='button' value='.B1 children(child)' id='testChildren'>
<input type='button' value='.B1 find(child)' id='testFind'>

</body>
</html>


デモを試してください


jquery


jquery
トラバース