HOME > > > > >

parent > child

parentを親に持つ直接のchild要素を取得します。

サンプル

実行結果

jQuery
Core
jQuery( expression, context )
jQuery( html, ownerDocument )
jQuery( elements )

Selectorsセレクタ―

  • All Selector (*)
  • :animated Selector
  • Attribute
Attributes

Javascript

  1. $('.jqTest').click(function(e){
  2.     if ($(e.target).attr('class') === 'select_all') {
  3.         $('.jqTest > *').css({backgroundColor: '#FFFAC6'});
  4.     } else if ($(e.target).attr('class') === 'select_p') {
  5.         $('.jqTest > p').css({backgroundColor: '#9FB7D4'});
  6.     }
  7. });

HTML

  1. <div class="jqTest">
  2.     <h6>jQuery</h6>
  3.  
  4.     <dl>
  5.         <dt>Core</dt>
  6.         <dd>jQuery( expression, context )</dd>
  7.         <dd>jQuery( html, ownerDocument )</dd>
  8.         <dd>jQuery( elements )</dd>
  9.     </dl>
  10.  
  11.     <p>Selectors<span>セレクタ―</span></p>
  12.     <ul>
  13.         <li>All Selector (*)</li>
  14.         <li>:animated Selector</li>
  15.         <li>Attribute</li>
  16.     </ul>
  17.  
  18.     <a href="#">Attributes</a>
  19.  
  20.     <br />
  21.  
  22.     <button class="select_all">.jqTest > *</button><button class="select_p">.jqTest > p</button>
  23. </div>