Filtrage jQuery
jQuery Traversal - Filtre
Plage abrégée d'éléments de recherche
Les trois méthodes de filtrage les plus élémentaires sont : first(), last() et eq(), qui vous permettent de sélectionner un élément spécifique en fonction de sa position dans un ensemble d'éléments.
D'autres méthodes de filtrage telles que filter() et not() permettent de sélectionner des éléments qui correspondent ou non à un critère spécifié.
Méthode jQuery first()
first() La méthode renvoie le premier élément des éléments sélectionnés.
L'exemple suivant sélectionne le premier élément <p> à l'intérieur du premier élément <div> :
Exemple
<!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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Méthode jQuery last()
La méthode last() renvoie le dernier élément des éléments sélectionnés.
L'exemple suivant sélectionne le dernier élément <p> dans le dernier élément <div> :
Exemple
<!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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Méthode jQuery eq()
La méthode eq() renvoie l'élément avec le numéro d'index spécifié parmi les éléments sélectionnés.
Les indices commencent à 0, donc le premier élément a un indice de 0 au lieu de 1. L'exemple suivant sélectionne le deuxième élément <p> (numéro d'index 1) :
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>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Méthode jQuery filter()
La méthode filter() permet de préciser un critère. Les éléments qui ne correspondent pas à ce critère sont supprimés de la collection et les éléments correspondants sont renvoyés.
L'exemple suivant renvoie tous les éléments <p> avec le nom de classe "url" :
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").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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Méthode jQuery not()
La méthode not() renvoie tous les éléments qui ne correspondent pas aux critères.
Astuce : La méthode not() est l'opposé de filter().
L'exemple suivant renvoie tous les éléments <p> sans le nom de classe "url" :
Instances
<!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","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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
