くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[jQuery]eqセレクター

セレクターの中から

特定の順番の要素を選択するのに使うのが、eq(equal)セレクタ

特定の要素の前の要素を選択するのが、lt(less than)セレクタ

特定の要素の後ろの要素を選択するのが、gt(greater than)セレクタ

使い方

$(’セレクター:eq( n )’)

nは出現する番号を入れる。1番目の要素は「0」、2番目は「1」となる

 

f:id:pleasure10501:20150413194125p:plain

<ul>
    <li>花花花花花</li>
    <li>海海海海海</li>
    <li>月月月月月</li>
    <li>山山山山山</li>
</ul>

$(document).ready( function() {
  $('li:eq(1)').css('background','pink');
  $('li:eq(3)').text('風風風風風').css('color','#F00');
});

 ※li要素の2番目に background:pink を実行

 ※li要素の3番目にテキストの置き換えと、color : #F00 を実行  

 

《実行後》

f:id:pleasure10501:20150413194158p:plain

広告を非表示にする