Parcours jQuery - Filtrage

Avec jQuery, il est facile de filtrer divers éléments d'une liste d'éléments DOM.

Dans ce chapitre, nous allons expliquer comment restreindre la recherche des éléments dans l'arbre DOM.

Filtrer l'arbre DOM

Nous avons les méthodes jQuery suivantes, qui permettent de sélectionner des éléments en fonction de leur position dans un ensemble d'éléments :

• first()

• last()

• eq()

• filter()

• not()

• has()

• is()

Nous allons vous montrer comment utiliser chaque méthode.

Méthode jQuery first()

jQuery first()La méthode renvoie l'élément le plus ancien sélectionné.

L'exemple suivant met en évidence le premier paragraphe :

$ (document).ready(function () {
　　$("p").first().css("background", "coral");
});

Méthode jQuery last()

jQuery last()La méthode renvoie l'élément le plus récent sélectionné.

L'exemple suivant met en évidence le dernier paragraphe :

$ (document).ready(function () {
　　$("p").last().css("background", "coral");
});

Méthode jQuery eq()

jQuery eq()La méthode renvoie l'élément qui a l'index spécifique sélectionné de l'élément sélectionné.

L'index commence toujours à 0, donc le premier chiffre aura l'index 0 (au lieu de1).

L'exemple suivant sélectionne le troisième paragraphe (numéro d'index2):

$("button").click(function(){
　　$("p").eq(2).css("background-color", "red");
});

方法filterjQuery

jQuery filter()La méthode renvoie les éléments qui correspondent à une condition spécifique.

Cette méthode filtre tous les éléments qui ne correspondent pas aux conditions sélectionnées et renvoie ceux qui correspondent.

L'exemple suivant renvoie tous les paragraphes avec le nom de classe "demo":

$ (document).ready(function () {
　　$("p").filter(".demo").css("background", "coral");
});

L'exemple suivant renvoie tous les éléments de liste pairs :

$ (document).ready(function () {
　　$("li").filter(":even").css("background", "coral");
});

Méthode jQuery not()

jQuery not()La méthode renvoie les éléments qui ne correspondent pas à une condition spécifique.

Cette méthode est comparable àfilter()L'inverse est vrai.

L'exemple suivant renvoie tous les paragraphes sans le nom de classe "demo":

$ (document).ready(function () {
　　$("p").not(".demo").css("background", "coral");
});

方法hasjQuery

jQuery has()方法返回与指定选择器匹配的所有元素，其中包含一个或多个元素。

以下示例返回其中包含<span>元素的所有段落：

$ (document).ready(function () {
　　$("p").has("span").css("background"-color", "coral");
});

方法isjQuery

jQuery is()方法检查所选元素之一是否与给定参数匹配。

如果这些元素中的至少一个与给定参数匹配，则此方法将返回true，否则返回false。

下面的示例检查<p>的父级是否为<div>元素：

$ (document).ready(function () {
　　$("p").parent().is("div");
});

参考遍历jQuery

有关完整的遍历方法参考，请访问我们的参考遍历jQuery。