oujood.com

jQuery : Le sélecteur not()

sélectionne tous les éléments sauf l'élément spécifié en paramètre
Avec une liste d'éléments, la tâche consiste à ne pas sélectionner une classe particulière en utilisant JQuery.

chercher |

Définition et Utilisation sélecteur :not()

sélectionne tous les éléments sauf l'élément spécifié en paramètre.

Le sélecteur : not() est surtout utilisé avec un autre sélecteur pour sélectionner tout dans un groupe d’éléments, sauf l'élément spécifié (comme dans l'exemple ci-dessous).

Syntaxe :

$(":not(selecteur)")

Paramètres : Il contient un seul paramètre de sélection. Il spécifie l'élément qui ne doit pas être sélectionné. Ce paramètre accepte tous les types de sélecteurs.

Paramètre Description
sélecteur Obligatoire. Spécifie l'élément à ne pas sélectionner.
Ce paramètre accepte tout type de sélecteur.
 

Exemple : Sélectionnez tous les éléments p sauf ceux avec la class = "intro " :

Dans cet exemple touts les éléments p aurons une couleur d’arrière plan en vert sauf ceux avec la class .intro c'est-à-dire le 4ème et le dernier

Code

  Copier le code

<!DOCTYPE html>
<html>
<head lang="fr">
<meta charset="utf-8">
<title>jQuery selecteur not </title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("p:not(.intro)").css("background-color","#aaff00");
  });
  </script>
  </head>
  <body>
  <h1>Bien venu sur le site www.oujood.com</h1>
  <p>Ceci est un élément P avec index (0)</p>
  <p>Ceci est un élément P  avec index (1)</p>
  <p class="intro">Ceci est un élément P avec index(2)</p>
  <p>Ceci est un élément P avec index (3)</p>
  <p>Ceci est un élément P avec index (4)</p>
  <p class="intro">Ceci est un élément P avec index(5)</p>
  </body>
  </html>

Méthode jQuery not()

Méthode jQuery not() : Cette méthode renvoie les éléments qui ne correspondent pas à une condition définie. Cette méthode spécifie une condition. Les éléments qui ne correspondent pas à la condition sont renvoyés, et ceux qui y correspondent sont supprimés du groupe sélectionné. La plupart du temps, cette méthode est utilisée pour supprimer un ou plusieurs éléments d'un groupe d'éléments sélectionnés.
Syntaxe :

$(selector).not(condition, function(index))

Paramètres :
condition : Ce paramètre est facultatif. Il spécifie une expression de sélecteur, un objet jQuery ou un ou plusieurs éléments à supprimer d'un groupe d'éléments sélectionnés.
function(index) : Ce paramètre est facultatif. Il spécifie une fonction à exécuter pour chaque élément d'un groupe. S'il retourne vrai, l'élément est supprimé, sinon, l'élément est conservé.
index : Il spécifie la position de l'indice de l'élément dans le groupe

Exemple : Dans l'exemple qui suit , toutes les classes de départ Demo sont d'abord sélectionnées puis la classe Demo1 est retirée de la sélection en utilisant la méthode .not().

Code

  Copier le code

<!DOCTYPE html>
<html>
<head lang="fr">
<meta charset="utf-8">
<title>	Not class selector in jQuery.</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>	
 </head>
<body style = "text-align:center;">
		<h1 id = "h" style = "color:green;" >Bien venu sur le site www.oujood.com</h1>
		<p id = "GFG" style ="font-size: 15px; font-weight: bold;">
			cliquez sur le bouton pour modifier le contenu du texte
			de toutes les classes sauf Demo1
		</p>	
		<p class = "Demo1" style =
			"font-size: 15px; font-weight: bold;">
			Demo1
		</p>
		<p class = "Demo2" style =
			"font-size: 15px; font-weight: bold;">
			Demo2
		</p>
		<p class = "Demo3" style =
			"font-size: 15px; font-weight: bold;">
			Demo3
		</p>
		<button id = "button">
			OK
		</button>
		<p class = "Demo">Cliquer sur le bouton pour changer le contenu</p>	
<script>
	$("button").on('click', function() {
	$('p[class^="Demo"]').not('.Demo1').text("nouveau Contenu");
	$(".Demo").css("color","red").css( "font-size", "20px").css("font-weight", "900");
	});
</script>
</body>
</html>



          JQuery référenves des sélecteurs     
Par gerywa 25 juillet 2014



Voir aussi nos tutoriel :

Balise summary

Définit un en-tête visible d'un élément

text-indent

Spécifie l'indentation de la première ligne dans un bloc de texte

:hover

Ajoute un style à un élément lorsque vous passez la souris dessus