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