jQueryフィルタリング
jQuery Traversal - フィルタリング
要素の略語検索範囲
3 つの最も基本的なフィルタリング メソッドは、first()、last()、および eq() です。要素のセット内の位置に基づいて特定の要素を選択します。
filter() や not() などの他のフィルタリング メソッドを使用すると、指定した基準に一致する要素または一致しない要素を選択できます。
jQuery first() メソッド
first() メソッドは、選択された要素の最初の要素を返します。
次の例では、最初の <div> 要素内の最初の <p> 要素を選択します:
インスタンス
<!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","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<div>
<p>这是 div 中的一个段落。</p>
</div>
<div>
<p>这是另外一个 div 中的一个段落。</p>
</div>
<p>这是一个段落。</p>
</body>
</html>[インスタンスを実行] ボタンをクリックして、オンライン インスタンスを表示します
jQuery last() メソッド
last() メソッドは、選択された要素の最後の要素を返します。
次の例では、最後の <div> 要素の最後の <p> 要素を選択します:
インスタンス<!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","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<div>
<p>这是 div 中的一个段落。</p>
</div>
<div>
<p>这是另外一个 div 中的一个段落。</p>
</div>
<p>这是一个段落。</p>
</body>
</html>
インスタンスの実行»オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします。
jQuery eq() メソッド
eq() メソッドは、選択された要素のうち、指定されたインデックス番号を持つ要素を返します。
filter() メソッドを使用すると、基準を指定できます。この基準に一致しない要素はコレクションから削除され、一致する要素が返されます。
次の例は、クラス名「url」を持つすべての <p> 要素を返します: Instance
次の例は、クラス名「url」を持つすべての <p> 要素を返します: Instance
<!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","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<p>菜鸟教程 (index 0).</p>
<p>http://www.runoob.com (index 1)。</p>
<p>google (index 2).</p>
<p>http://www.google.com (index 3)。</p>
</body>
</html>サンプルの実行 »
オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください
jQuery not() メソッド
not() メソッドは、一致しないすべての要素を返します基準。
ヒント: not() メソッドは filter() の逆です。
次の例は、クラス名「url」のないすべての <p> 要素を返します:
インスタンス
<!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>
<h1>欢迎访问我的主页</h1>
<p>菜鸟教程 (index 0).</p>
<p class="url">http://www.runoob.com (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>
</body>
</html>インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
