English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS メソッド - jQuery 遍历

フィルタリング

jQueryを使用すると、DOM要素リストからさまざまな要素を簡単にフィルタリングできます。

この章では、DOMツリーの要素の検索範囲を狭める方法を説明します。

DOMツリーのフィルタリング

以下に、特定の要素がグループ内の位置に基づいて選択されるためのjQueryメソッドがあります:

以下に、各メソッドの使用方法を説明します。

jQuery jQuery first()メソッドfirst()

方法は選択された要素の最初の要素を返します。

$("document").ready(function(){
  以下の例では、最初のセクションをハイライト表示します:
});
テストをしてみて‹/›

$("p").first().css("background", "coral");

jQuery jQuery last()メソッドlast()

方法は選択された要素の最後の要素を返します。

$("document").ready(function(){
  以下の例では、最後のセクションをハイライト表示します:
});
テストをしてみて‹/›

$("p").last().css("background", "coral");

jQuery jQuery eq()メソッドeq()

方法は選択された要素の特定のインデックス番号を持つ要素を返します。1索引号は常に0から始まるため、最初の数字はインデックス0(ではなく

)。2下面的示例选择第三段(索引号

):
  $("button").click(function(){2$("p").eq(-).css("background
});
テストをしてみて‹/›

jQuery filter() メソッド

jQuery filter()color", "red");

方法は特定の条件に一致する要素を返します。

このメソッドは、選択された条件に一致しないすべての要素をフィルタリングし、一致する要素を返します。

$("document").ready(function(){
  以下の例では、クラス名が「demo」のセクションをすべて返します:
});
テストをしてみて‹/›

$("p").filter(".demo").css("background", "coral");

$("document").ready(function(){
  以下の例では、すべての偶数リストアイテムを返します:
});
テストをしてみて‹/›

$("li").filter(":even").css("background", "coral");

jQuery jQuery not()メソッドnot()

このメソッドは、特定の条件に一致しない要素を返します。filter()方法の逆です。

以下の例では、クラス名「demo」を持たないセクションをすべて返します:

$("document").ready(function(){
  $("p").not(".demo").css("background", "coral");
});
テストをしてみて‹/›

jQuery has() メソッド

jQuery has()このメソッドは、指定された選択子に一致するすべての要素を返します。

以下の例では、<span>要素を含むすべての段落を返します:

$("document").ready(function(){
  $("p").has("span").css("background-color", "coral");
});
テストをしてみて‹/›

jQuery is() メソッド

jQuery is()このメソッドは、選択された要素の1つが指定されたパラメータに一致するかどうかを確認します。

このメソッドは、少なくとも1つの要素が指定されたパラメータに一致する場合にtrueを返し、一致しない場合にfalseを返します。

以下の例では、<p>の親が<div>要素であるかどうかを確認します:

$("document").ready(function(){
  $("p").parent().is("div");
});
テストをしてみて‹/›

jQuery 過濾参照

完全な過濾メソッドについては、以下のウェブサイトを訪れてくださいjQuery 過濾参照