find()メソッドは、対象となる要素から下にある階層から目的の「子要素」を取得することができます。
1 2 3 4 5 6 7 8 9 |
<div> <ul class="list"> <li class=”list-01″>リスト01</li> <li class=”list-02″>リスト02</li> <li class=”list-03″> <p><a class="link" href="#">リスト03</a></p> </li> </ul> </div> |
1 2 3 4 5 |
<script> var result = $('.list').find('a'); console.log( result[0] ); </script> |
上記では「.list」が付与されたulタグの子要素、「find(‘a’)」と記述することで階層下のaタグが習得できます。
■複数の属性を使った子要素の取得方法
1 2 3 4 5 6 |
<script> var result = $('.list').find('list-01, .link'); console.log( result[0] ); console.log( result[1] ); </script> |
find(‘list-01, .link’)と連続で記述することで、複数の要素を取り出すことができます。
コメント