eqフィルター/ltフィルター/gtフィルター

jQueryにはCSSセレクター以外にも、独自のセレクターである「フィルター」が利用できます。

セレクターの中から特定の順番の要素を指定する場合「eqフィルター」で、
特定の要素より前の要素を指定する場合「ltフィルター」で、
特定の要素より後の要素を指定する場合「gtフィルター」で指定する事が出来ます。
順番は数値で指定しますが、javascriptなので0から数えます。
1番目の要素を指定したい場合は(0)で指定してください。



下記の例では
1番目のli要素を「eqフィルター」で指定しCSSプロパティーを変更させます。

■javascript

$(function(){
$("li:eq(0)").css("color","red");
});

■HTML

<ul>
<li>テキストテキスト</li>
<li>テキストテキスト</li>
<li>テキストテキスト</li>
<li>テキストテキスト</li>
</ul>

■表示結果

  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト



下記の例では
5番目のli要素から上の要素を「ltフィルター」で指定しCSSプロパティーを変更させます。

■javascript

$(function(){
$("li:lt(4)").css("color","red");
});

■HTML

<ul>
<li>テキストテキスト</li>
<li>テキストテキスト</li>
<li>テキストテキスト</li>
<li>テキストテキスト</li>
<li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト</li> </ul>

■表示結果

  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト



下記の例では
5番目のli要素から下の要素を「gtフィルター」で指定しCSSプロパティーを変更させます。

■javascript

$(function(){
$("li:gt(4)").css("color","red");
});

■HTML

<ul>	
<li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト</li>
<li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト</li>
</ul>

■表示結果

  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト

投稿者:

kishiken

企業務めのWEBデザイナーです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です