jQuery トラバーサル - フィルタリング
要素の範(fàn)囲を検索
3 つの最も基本的なフィルタリング メソッドは、first()、last()、および eq() です。これらを使用すると、一連の要素內(nèi)の位置に基づいて特定の要素を選択できます。
filter() や not() などの他のフィルタリング メソッドを使用すると、指定した基準(zhǔn)に一致する要素または一致しない要素を選択できます。
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> 要素內(nèi)の最初の <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> 內(nèi)の最後の <p> 要素を選択します。
eq()メソッド
eq()メソッドは、選択された要素のうち、指定されたインデックス番號(hào)を持つ要素を返します。
インデックス番號(hào)は 0 から始まるため、最初の要素のインデックス番號(hào)は 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中文網(wǎng) (index 0).</p>
<p>http://ipnx.cn (index 1)。</p>
<p>google (index 2).</p>
<p>http://www.google.com (index 3)。</p>
</body>
</html>2 番目の <p> 要素 (インデックス 1) を選択します。
filter() メソッド
filter() メソッドを使用すると、基準(zhǔn)を指定できます。この基準(zhǔn)に一致しない要素はコレクションから削除され、一致する要素が返されます。
<!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中文網(wǎng) (index 0).</p>
<p class="url">http://ipnx.cn (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中文網(wǎng) (index 0).</p>
<p class="url">http://ipnx.cn (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>
</body>
</html>クラス名「url」を含まないすべての <p> 要素を返します。
