jQuery勉強めも②
jQueryのことで勉強したことめも続き
フィルタ
#subの子要素にあるli要素のうち、好きなものをフィルタを使って選び、文字色を赤にします。
<ul id="main"> <li>0</li> <li class="item">1</li> <li class="item">2</li> <li> 3 <ul id="sub"> <li>3-0</li> <li>3-1</li> <li class="item">3-2</li> <li class="item">3-3</li> <li>3-4</li> </ul> </li> </ul>
①:eq()
#sub直下の2番目のli要素にだけ反映
$(function)(){
$("#sub>li:eq(2)").css('color','red');
});()の中に選択したい番号を記述します。
この番号は添え字と言って、0から始まりますので、3-2を選択したいときは、:eq(2)となります。
<ul id="sub"> <li>3-0</li> //添え字[0] <li>3-1</li> //添え字[1] <li class="item">3-2</li> //添え字[2] <li class="item">3-3</li> //添え字[3] <li>3-4</li> //添え字[4] </ul>
以下の文字だけ赤くなります
<li class="item">3-2</li> //添え字[2]
②:gt()
添え字[n]より大きいものが選択されます
$(function)(){
$("#sub>li:gt(1)").css('color','red');
});この場合、添え字[1]より大きいものを選択していますので、以下のli要素に反映されます
<li class="item">3-2</li> //添え字[2] <li class="item">3-3</li> //添え字[3] <li>3-4</li> //添え字[4]
③:lt()
添え字[n]より小さいものが選択されます
$(function)(){
$("#sub>li:lt(1)").css('color','red');
});この場合、添え字[1]より小さいものを選択していますので、以下のli要素に反映されます
<li>3-0</li> //添え字[0]
④:odd
添え字[n]の奇数のものが選択されます
$(function)(){
$("#sub>li:odd").css('color','red');
});この場合、以下のli要素に反映されます
<li>3-1</li> //添え字[1] <li class="item">3-3</li> //添え字[3]
⑤:even
添え字[n]の偶数のものが選択されます
$(function)(){
$("#sub>li:even").css('color','red');
});この場合、以下のli要素に反映されます
<li>3-0</li> //添え字[0] <li class="item">3-2</li> //添え字[2] <li>3-4</li> //添え字[4]
⑥:contains()
要素の中身に入っているものを選択します
$(function)(){
$("#sub>li:contains('4')").css('color','red');
});この場合、li要素の中に「4」が入っているものにだけ反映されます
<li>3-4</li> //添え字[4]
⑦:first、:last
:firstでは、要素の最初にだけ反映されます
$(function)(){
$("#sub>li:first").css('color','red');
});この場合、li要素の最初にだけ反映されます
<li>3-0</li> //添え字[0]
また、:firstに対して、:lastでは要素の最後にだけ反映されます
$(function)(){
$("#sub>li:last").css('color','red');
});この場合、li要素の最後にだけ反映されます
<li>3-4</li> //添え字[4]
