Maison > interface Web > Questions et réponses frontales > Comment exclure div avec jquery

Comment exclure div avec jquery

PHPz
Libérer: 2023-04-26 10:50:45
original
600 Les gens l'ont consulté

Lorsque vous utilisez jQuery pour exploiter des pages HTML, vous rencontrez souvent des situations où vous devez exclure certains éléments. Il existe de nombreuses façons d'exclure des éléments. Cet article explique comment utiliser jQuery pour exclure des éléments div à travers des exemples.

1. Syntaxe de base

Dans jQuery, vous pouvez utiliser la méthode not() pour exclure certains éléments. La méthode not() peut recevoir un sélecteur en paramètre pour exclure les éléments inutiles de l'ensemble des éléments correspondants.

La syntaxe de base est la suivante :

$(selector).not(selector)
Copier après la connexion

Parmi eux, le premier paramètre du sélecteur est le sélecteur de l'élément à opérer, et le deuxième paramètre du sélecteur est le sélecteur de l'élément à exclure.

2. Exclure un seul élément div

Regardons d'abord un exemple simple. Supposons qu'il y ait le code HTML suivant :

<div class="wrapper">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box excluded">Box 4</div>
  <div class="box">Box 5</div>
</div>
Copier après la connexion

Maintenant, nous devons exclure l'un des éléments div avec la classe "exclus" et n'opérer que sur les autres éléments. Nous pouvons utiliser le code suivant :

$('.box').not('.excluded').css('background-color', 'gray')
Copier après la connexion

Dans le code ci-dessus, utilisez d'abord le sélecteur ".box" pour sélectionner tous les éléments div avec la classe "box", puis utilisez la méthode not() pour exclure les éléments div avec la classe "exclus". ". Enfin, utilisez la méthode css() pour définir la couleur d'arrière-plan de ces éléments sur gris.

3. Exclure plusieurs éléments div

En plus d'exclure un seul élément div, nous pouvons également exclure plusieurs éléments. Considérez le code HTML suivant :

<div class="wrapper">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box excluded">Box 4</div>
  <div class="box">Box 5</div>
  <hr>
  <div class="panel">Panel 1</div>
  <div class="panel">Panel 2</div>
  <div class="panel">Panel 3</div>
  <div class="panel excluded">Panel 4</div>
  <div class="panel">Panel 5</div>
</div>
Copier après la connexion

Maintenant, nous devons exclure tous les éléments avec la classe "exclus", qu'il s'agisse d'un div ou d'autres éléments. Vous pouvez utiliser le code suivant :

$('*').not('.excluded').css('color', 'red')
Copier après la connexion

Dans le code ci-dessus, utilisez le caractère générique "*" pour sélectionner tous les éléments, puis utilisez la méthode not() pour exclure les éléments de classe "exclus", et enfin utilisez la méthode css() pour définir la couleur du texte de ces éléments sur rouge. Il est important de noter que l’utilisation de caractères génériques fonctionnera sur tous les éléments de la page, utilisez-les donc uniquement si vous en avez vraiment besoin.

4. Résumé

Cet article explique comment exclure des éléments div dans jQuery. La méthode not() peut être utilisée pour exclure les éléments inutiles de l'ensemble d'éléments correspondants, réalisant ainsi des opérations sur les éléments requis. Il est à noter que la règle exclue peut être un sélecteur d'un ou plusieurs éléments, ou un caractère générique. En utilisation réelle, la méthode appropriée doit être sélectionnée en fonction de la situation spécifique pour éviter des effets inutiles.

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!

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal