HOME > > > > >

prev ~ siblings

prevと兄弟関係にあるsiblingsを選択する。

サンプル

h5と兄弟関係にあるp要素とimg要素を含むdiv要素を選択する。

実行結果

リストの見出し

jQueryのてすと

  • リスト1
  • リスト2

test

aaaa

Javascript

  1. $('.execute').click(function(){
  2.     $('h5 ~ p,div:has("img")', $(this).parent()).css({
  3.         display: 'inline-block',
  4.         padding: 5,
  5.         border: '1px solid #009999'
  6.     });
  7. });

HTML

  1. <div class="jqTest">
  2.     <input type="button" value="jQuery *テスト" class="execute" />
  3.  
  4.  
  5.     <h5>リストの見出し</h5>
  6.  
  7.     <div>
  8.         <p>jQueryのてすと</p>
  9.  
  10.         <ul>
  11.             <li>リスト1</li>
  12.             <li>リスト2</li>
  13.         </ul>
  14.     </div>
  15.  
  16.     <p><span>test</span></p>
  17.  
  18.     <div>aaaa</div>
  19.  
  20.     <img src="/resource/icons/comment.gif" />
  21.  
  22.     <input type="text" name="data[tel]" value="電話暗号は入力できません" />
  23.  
  24.     <div><img src="/resource/icons/comment.gif" /></div>
  25. </div>