執筆者: 有限会社 WINGS プロジェクト 山田 祥寛


$() 関数で取得した要素セットを更に絞り込みたいという場合には、filter、not、eq、slice などのメソッドを利用します。

HTML
<ol id="list"  <li>1 番目</li> 
  <li class="new">2 番目</li> 
  <li>3 番目</li> 
  <li>4 番目</li> 
  <li class="new">5 番目</li> 
  <li>6 番目</li> 
  <li>7 番目</li> 
  <li class="new">8 番目</li> 
  <li>9 番目</li> 
</ol> 
 
<script src="../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$('#list > li')  // id 属性が "list" である要素配下の <li> 要素 
 
  .eq(2)  // 要素セットから 3 番目の要素を取得 
  .css('background-color''Yellow')  // 背景を黄色に 
  .end()  // フィルターをリセット 
 
  .eq(-2)  // 要素セットの末尾から 2 番目の要素を取得 
  .css('background-color''Aqua')  // 背景をアクア色に 
  .end()  // フィルターをリセット 
 
  .slice(46)  // 5 ~ 6 番目の要素を取得 
  .css('background-color''Orange')  // 背景をオレンジ色に 
  .end()  // フィルターをリセット 
 
  .filter('.new')  // class 属性が "new" である要素を取得 
  .css('border''Solid 5px Green')  // 緑の枠線を付与 
  .end()  // フィルターをリセット 
 
  .not(':first, :last')  // 最初と最後の要素を除去 
  .css('font-weight''bold');  // フォントをボールドに 
</script> 
 

図 1

現在の要素セットをフィルターするためのメソッドには、以下のようなものがあります。

メソッド 概要
eq(index) index + 1 番目の要素を取得
slice(start, end) start + 1 ~ end 番目の要素を取得
filter(selector) セレクター式 selector で指定された要素を取得
not(selector) セレクター式 selector で指定された要素を除去

eq メソッドの引数 index、slice メソッドの引数 start に負数を指定した場合には、要素セットの末尾から要素を数えます。

end メソッドは、フィルター系のメソッドで要素セットの内容が変化した場合に、フィルターする前の状態に戻すためのメソッドです。サンプルのように、「フィルター メソッドで要素を絞り込み、end メソッドでフィルターをリセットし…」を交互に繰り返すことで、要素セットの中での行き来をスマートに表現できます。

なお、(現在の要素セットではなく) 要素セット配下の子要素から絞り込みを行うには、find メソッドを利用します。filter メソッドと混同しやすいので、注意してください。以下は、<ol> 要素の配下から、class 属性が "new" である要素を取り出し、その背景を黄色に変化させています。

HTML
<ol id="list"  <li>1 番目</li> 
  <li class="new">2 番目</li> 
  <li>3 番目</li> 
</ol> 
<ol class="new"  <li>4 番目</li> 
  <li>5 番目</li> 
</ol> 
<script src="../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$('ol')  // <ol> 要素を取得 
  .find('.new')  // 配下から class 属性が "new" である要素を取得 
  .css('background-color''Yellow');  // 背景を黄色に 
</script> 
 

図 2

フィルターの対象がもともとの要素セットが示す <ol> 要素でなく、配下の <li> 要素である点に注目です。


Code Recipe ASP.NET デベロッパーセンター

ページのトップへ