HOME > > > > >

:nth-child(index/even/odd/equation)

指定の数字にマッチした要素を取得する。これはjQueryオブジェクト内のindexではなくCSSにおけるindexで指定する。いちばん最初が0から始まるか1から始まるか。

サンプル

実行結果

  • list 0
  • list 1
  • list 2
  • list 3
  • list 4
  • list 5
  • list 6
  • list 7
  • list 8
  • list 9

Javascript

  1. $('.jqTest :button').click(function(){
  2.     if ($(this).attr('class') === 'reset') {
  3.         $('.jqTest li').css({ fontWeight: 'lighter' });
  4.     } else {
  5.          $('li:nth-child(' + $(this).val() + ')', '.jqTest').css({ fontWeight: 'bold' });
  6.     }
  7. });

HTML

  1. <div class="jqTest">
  2.     <input type="button" value="5" class="execute" />
  3.     <input type="button" value="odd" class="execute" />
  4.     <input type="button" value="even" class="execute" />
  5.     <input type="button" value="2n+1" class="execute" />
  6.     <input type="button" value="リセット" class="reset" />
  7.     <ul>
  8.         <li>list 0</li>
  9.         <li>list 1</li>
  10.         <li>list 2</li>
  11.         <li>list 3</li>
  12.         <li>list 4</li>
  13.         <li>list 5</li>
  14.         <li>list 6</li>
  15.         <li>list 7</li>
  16.         <li>list 8</li>
  17.         <li>list 9</li>
  18.     </ul>
  19. </div>