jQuery トラバーサル - フィルタリング
要素の範囲を検索
3 つの最も基本的なフィルタリング メソッドは、first()、last()、および eq() です。これらを使用すると、一連の要素内の位置に基づいて特定の要素を選択できます。
filter() や not() などの他のフィルタリング メソッドを使用すると、指定した基準に一致する要素または一致しない要素を選択できます。
first()メソッド
first()メソッドは、選択された要素の最初の要素を返します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div p").first().css("background-color","blue");
});
</script>
</head>
<body>
<div>
<p>段落1</p>
</div>
<div>
<p>段落2</p>
</div>
<p>段落3</p>
</body>
</html>最初の <div> 要素内の最初の <p> 要素を選択します。
last() メソッド
last() メソッドは、選択された要素の最後の要素を返します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div p").last().css("background-color","red");
});
</script>
</head>
<body>
<div>
<p>段落1</p>
</div>
<div>
<p>段落2</p>
</div>
<p>段落3</p>
</body>
</html>最後の <div> 内の最後の <p> 要素を選択します。
eq()メソッド
eq()メソッドは、選択された要素のうち、指定されたインデックス番号を持つ要素を返します。
インデックス番号は 0 から始まるため、最初の要素のインデックス番号は 1 ではなく 0 になります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").eq(1).css("background-color","green");
});
</script>
</head>
<body>
<p>php中文网 (index 0).</p>
<p>//m.sbmmt.com (index 1)。</p>
<p>google (index 2).</p>
<p>http://www.google.com (index 3)。</p>
</body>
</html>2 番目の <p> 要素 (インデックス 1) を選択します。
filter() メソッド
filter() メソッドを使用すると、基準を指定できます。この基準に一致しない要素はコレクションから削除され、一致する要素が返されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").filter(".url").css("background-color","yellow");
});
</script>
</head>
<body>
<p>php中文网 (index 0).</p>
<p class="url">//m.sbmmt.com (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>
</body>
</html>クラス名「url」を持つすべての <p> 要素を返します。
not()メソッド
not()メソッドは、条件に一致しないすべての要素を返します。
ヒント: not() メソッドは filter() の逆です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").not(".url").css("background-color","gray");
});
</script>
</head>
<body>
<p>php中文网 (index 0).</p>
<p class="url">//m.sbmmt.com (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>
</body>
</html>クラス名「url」を含まないすべての <p> 要素を返します。
新しいファイル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").eq(-1).css({"color":"red","border":"2px solid blue"})
})
</script>
</head>
<body>
<div>
<ul>
<li>HTML专区</li>
<li>Javascript专区</li>
<li>Div+Css专区</li>
<li>Jquery专区</li>
</ul>
<p> eq 是负数的时候，从最后一个元素往回计数。</p>
</div>
</body>
</html>
プレビュー
Clear
- おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
このコースを視聴した生徒はこちらも学んでいます
