jQuery find()の例
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>