jqueryで要素を取得するいくつかの方法のまとめ

1指定したシーケンス番号から要素をコレクションから取得
html:

 
  
 
  
0
 
  
1
 
  
2
 
  
3
 
  
4
 
  
5
 
  
6
 
  
7
 
  
 
  
 
 

JS

 
  
 
  <br>jQuery(function(){ 
  <br>$("p").eq(2).css("color","red"); 
  <br>$("p").eq(3).css("color","red"); 
  <br>}) 
  <br> 
  
 
 

2指定した条件が一致し、範囲が指定された要素を取得する
html:

 
  
 
  
0
 
  
1
 
  
2
 
  
3
 
  
4
 
  
5
 
  
6
 
  
7
 
  
 
  
 
 

JS

 
  
 
  <br>jQuery(function(){ 
  <br>$("p").filter('.center').css("color","red"); 
  <br>}) 
  <br>$(function(){ 
  <br>$("p").slice(5,7).css("color","yellow"); 
  <br>}) 
  <br> 
  
 
 

3条件式と一致する要素を取得
html:

 
  
 
  
0
 
  
1
 
  
2
 
  
3
 
  
4
 
  
5
 
  
6
 
  
7
 
  
 
  
 
 

js

 
  
 
  <br>jQuery(function(){ 
  <br>$("p").each(function(){ 
  <br>switch(true){ 
  <br>case $(this).is(".center"): 
  <br>$(this).css("color","red"); 
  <br>break; 
  <br>case $(this).is(".aa"): 
  <br>$(this).css("color","yellow"); 
  <br>break; 
  <br>} 
  <br>}) 
  <br>}) 
  <br> 
  
 
 

4要素の前の要素と次の要素を取得
Html:

 
  
 
  
1 
 
  
2 
 
  
3 
 
  
4 
 
  
5 
 
  
6 
 
  
7 
 
  
 
  
 
 

js

 
  
//           
  
jQuery(function(){ 
  
$("p").next(".yes").css("color","red"); 
  
}) 
  
//           
  
jQuery(function(){ 
  
$("p").prev(".yes").css("color","red"); 
  
}) 
  
 
 

5要素の親要素と子要素の取得
html:

 
  
 
  
1 
 
  
2 
 
  
3 
 
  
4 
 
  
5 
 
  
6 
 
  
7 
 
  
 
  
 
 

js

 
  
//         
  
jQuery(function(){ 
  
$("p").parent().css("color","red"); 
  
}) 
  
//         
  
jQuery(function(){ 
  
$("#aa").children(".yes").css("color","red"); 
  
})