jQuery - 基本フィルター
公開日:2018-12-10 更新日:2019-05-14
[jQuery]
1. 概要
基本フィルターで要素を指定します。
セレクタで指定された要素を、さらに絞り込みます。
インデックスは、要素に付与される 0 から始まる連番です。階層ごとに新しく付与されます。
セレクタで指定された要素を、さらに絞り込みます。
インデックスは、要素に付与される 0 から始まる連番です。階層ごとに新しく付与されます。
$("セレクタ:first") //最初に見つかった先頭の要素
$("セレクタ:last") //最初に見つかった最後の要素
$("セレクタ:even") //インデックスが偶数の要素
$("セレクタ:odd") //インデックスが奇数の要素
$("セレクタ:eq(インデックス)") //指定したインデックスの要素
$("セレクタ:lt(インデックス)") //指定したインデックス未満の要素
$("セレクタ:gt(インデックス)") //指定したインデックスより大きい要素
$("セレクタ:not(セレクタ)") //指定したセレクタに該当しない要素
2.1 サンプル
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<div id="a">
<div id="a0">A-0</div>
<div id="a1">A-1</div>
<div id="a2">A-2</div>
<div id="a3">A-3</div>
<div id="a4">A-4</div>
<div id="a5">A-5</div>
<div id="a6">A-6</div>
<div id="a7">A-7</div>
<div id="a8">A-8</div>
<div id="a9">A-9</div>
</div>
<!-- Script -->
<script>
$(function(){
//対象:先頭
$("#a div:first").css("color", "red");
//対象:最後
$("#a div:last" ).css("color", "yellow");
//対象:偶数番目の要素 (0から始まるので要注意)
$("#a div:even" ).css("background-color", "#333");
//対象:奇数番目の要素
$("#a div:odd" ).css("background-color", "#003");
//対象:5番目
$("#a div:eq(5)" ).css("font-size", "28px");
//対象:0 ~ 4番目
$("#a div:lt(5)" ).css("font-size", "12px");
//対象:6番目~
$("#a div:gt(5)" ).css("font-size", "18px");
});
</script>
</body></html>
実行結果:画面
2.2 サンプル
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<div id="a">
<div class="info">A-0</div>
<div class="info">A-1</div>
<div class="info">A-2</div>
<div class="info">A-3</div>
<div>A-4</div>
<div>A-5</div>
<div>A-6</div>
<div>A-7</div>
</div>
<div id="b">
<div class="info">B-0</div>
<div>B-1</div>
</div>
<!-- Script -->
<script>
$(function(){
//対象:#a div と同じ階層にある .info
$("#a .info").css("color", "yellow");
//対象:#a div と同じ階層にある .info 以外
$("#a div:not(.info)").css("color", "red");
});
</script>
</body></html>
実行結果:画面
2.3 サンプル
フィルターを2回使って、<td>だけ1行毎に色を付けています。
今回は2つ目のフィルターに :has() を使っているため問題ありませんが、:eq() などでインデックスを指定する場合は、絞り込まれた後のインデックスを指定する必要があるため、要注意です。
また、css の nth-child() でも1行毎に色付けができますが、インデックスではなく、何番目かで指定するため、奇数・偶数の意味が逆になります。
今回は2つ目のフィルターに :has() を使っているため問題ありませんが、:eq() などでインデックスを指定する場合は、絞り込まれた後のインデックスを指定する必要があるため、要注意です。
また、css の nth-child() でも1行毎に色付けができますが、インデックスではなく、何番目かで指定するため、奇数・偶数の意味が逆になります。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<style>
table { border-collapse:collapse; }
th { background-color:blue; }
th,td { padding:2px 16px; border:1px solid white;}
tr:nth-child(1) { font-size:32px; }
tr:nth-child(even) { background-color:#aaa; }
</style>
<!-- 画面 -->
<table style="">
<tr>
<th>商品名</th>
<th>値段</th>
</tr>
<tr>
<td>りんご</td>
<td>30</td>
</tr>
<tr>
<td>みかん</td>
<td>50</td>
</tr>
<tr>
<td>ぶどう</td>
<td>70</td>
</tr>
<tr>
<td>すいか</td>
<td>100</td>
</tr>
<tr>
<td>メロン</td>
<td>120</td>
</tr>
<tr>
<td>イチゴ</td>
<td>140</td>
</tr>
</table>
<!-- Script -->
<script>
$(function(){
//対象:<tr>のインデックスが偶数、かつ、<tr>を持つ要素 -> 背景をグレーにする
$("table tr:even:has(td)").css("background-color", "#555");
});
</script>
</body></html>
実行結果:画面