Maison > Article > interface Web > Explication détaillée de l'utilisation de jQuery.not(sélecteur)

Explication détaillée de l'utilisation de jQuery.not(sélecteur)

巴扎黑original: 2017-06-22 17:51:572400parcourir

.not(selector) Renvoie : jQuery

Description : Supprime des éléments de l'ensemble des éléments correspondants.

Version ajoutée : 1.0.not (sélecteur)

Sélectionner

Type : sélecteur ou élément ou tableau

contient une expression de sélecteur, un élément DOM ou une chaîne de tableaux d'éléments qui correspondent à cet ensemble.

Version augmentée : 1.4. (Fonction)

Fonction

Type : Fonction (index entier, élément élément) => Booléen

Fonction utilisée comme test pour chaque élément de la collection. Il accepte deux paramètres, index qui est l'index de l'élément dans l'élément de collection jQuery qui est l'élément DOM. Dans cette fonction, this fait référence à l'élément DOM actuel.

Version ajoutée : 1.4 Non sélectionné (sélectionné)

Sélectionné

Type : jQuery

Un objet jQuery existant pour correspondre au groupe d'éléments actuel.

Étant donné un objet jQuery représentant un ensemble d'éléments DOM.not(), cette méthode construit un nouvel objet jQuery à partir d'un sous-ensemble d'éléments correspondants. Le sélecteur fourni est testé sur chaque élément ; les éléments qui ne correspondent pas au sélecteur seront inclus dans le résultat.

Considérons une page avec une liste simple :

cinq

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Nous pouvons appliquer cette méthode à un ensemble d'éléments de liste :

$( "li" ).not( ":even" ).css( "background-color", "red" );

Le résultat de cet appel est un fond rouge pour les éléments 2 et 4 car ils ne correspondent pas au sélecteur (rappel : pair:odd utilise un index de 0).

Supprimer des éléments spécifiques

La deuxième version de la méthode .not() nous permet de supprimer des éléments de l'ensemble correspondant, en supposant que nous les ayons déjà trouvés via d'autres méthodes. Par exemple, disons que notre liste a un identifiant appliqué à l'un de ses éléments :

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li id="notli">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Nous pouvons obtenir le troisième élément de la liste en utilisant la fonction native JavaScript getElementById(), puis récupérer de jQuery Supprimez-le de l'objet :

$( "li" ).not( document.getElementById( "notli" ) )
  .css( "background-color", "red" );

Cette instruction change la couleur des éléments 1, 2, 4 et 5. Nous pourrions accomplir la même chose en utilisant des expressions jQuery plus simples, mais cette technique serait utile lorsque, par exemple, d'autres bibliothèques fournissent des références à des nœuds DOM purs.

Depuis jQuery 1.4, la méthode .not() peut prendre une fonction comme paramètre de la même manière que .filter(). Les éléments renvoyés par la fonction true sont exclus de la collection filtrée ; tous les autres éléments sont inclus.

Remarque : lorsque la chaîne Sélecteur CSS est transmise à .not(), les nœuds de texte et de commentaires seront toujours supprimés de l'objet jQuery résultant pendant le processus de filtrage. Lorsque vous fournissez un nœud ou un tableau de nœuds spécifique, le nœud de texte ou de commentaire ne sera supprimé de l'objet jQuery que s'il correspond à l'un des nœuds du tableau filtré.

Exemple :

Ajoutez une bordure à un div qui n'est ni verte ni bleue.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>not demo</title>
  <style>
  div {
    width: 50px;
    height: 50px;
    margin: 10px;
    float: left;
    background: yellow;
    border: 2px solid white;
  }
  .green {
    background: #8f8;
  }
  .gray {
    background: #ccc;
  }
  #blueone {
    background: #99f;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div></div>
<div id="blueone"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
 
<script>
$( "div" ).not( ".green, #blueone" )
  .css( "border-color", "red" );
</script>
 
</body>
</html>

Démo :

Supprimez l'élément avec l'ID "sélectionné" de la collection de tous les paragraphes.

$( "p" ).not( $( "#selected" )[ 0 ] );

Supprime l'élément avec l'ID "sélectionné" de la collection de tous les paragraphes.

$( "p" ).not( "#selected" );

Supprime tous les éléments correspondant à "div p.selected" de l'ensemble total de tous les paragraphes.

$( "p" ).not( $( "div p.selected" ) );

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utilisez Jquery+Ajax+xml pour créer des effets de liaison à trois niveauxArticle suivant：Utilisez Jquery+Ajax+xml pour créer des effets de liaison à trois niveaux

Articles Liés

Voir plus