web-dev-qa-db-fra.com

jQuery récupère toutes les divs qui n'ont pas d'attribut de classe

obtenir toutes les divs qui ont un attribut de classe

$('div[class]')

obtenir toutes les divs qui n'ont pas d'attribut de classe

$('div[class!=""]')

Ce code fonctionne mais je ne comprends pas pourquoi cela fonctionne. Si le code ci-dessus fonctionne, le code de toutes les divs avec l'attribut class doit être

$('div[class=""]')

ce qui ne donne aucun résultat.

jqueryjquery-selectors
69
Roger

Essayez-le avec le sélecteur de pseudo-classe :not() :

$('div:not([class])')

Modifier

La description des sélecteurs jQuery dites:

  • [attribute]
    Correspond aux éléments qui ont l'attribut spécifié.
  • [attribute=value]
    Correspond aux éléments qui ont l'attribut spécifié avec une certaine valeur.
  • [attribute!=value]
    Correspond aux éléments qui n'ont pas l'attribut spécifié ou qui ont l'attribut spécifié mais pas avec une certaine valeur.

Cela signifie que div[class=""] Sélectionnerait tous les éléments DIV qui ont un attribut class spécifié avec une valeur vide.

Mais le dernier sélecteur est un sélecteur propriétaire de jQuery et non un sélecteur CSS . Vous devez utiliser :not() pour sélectionner tous les éléments DIV qui n'ont pas de classe:

div:not([class])
137
Gumbo

Ce qui est important à comprendre, c'est qu'il y a des attributs de classe vides ainsi que des éléments sans un attribut de classe, mais ils nécessitent différents tests pour être sélectionnés.

Il existe un certain nombre de tests qui font tous des choses différentes. Voici notre HTML pour nos tests:

<div class="">Empty Class Attribute </div>
<div class="column">Full Class Attribute </div>
<div>No Class Attribute </div>

Maintenant, exécutons nos tests (La première partie est simplement une chaîne qui nous aide à savoir ce qui vient d'être appelé dans l'alerte, sinon elle n'a pas de sens) :

$(document).ready(function(e){
  // Outputs "Empty Class Attribute Full Class Attribute"
  alert( "div[class] : "     + $('div[class]').text()     );

  // Outputs "Full Class Attribute"
  alert( "div[class!=''] : " + $('div[class!=""]').text() );

  // Outputs "Empty Class Attribute" 
  alert( "div[class=''] : "  + $('div[class=""]').text()  );

  // Outputs "No class Attribute"
  alert( "div:not([class]) : " + $('div:not([class])').text()     );
});

Vous pouvez afficher ce code dans votre navigateur en visitant ici: http://jsbin.com/ijup

Maintenant, armé de cette connaissance, si vous souhaitez sélectionner chaque élément div sur la page avec un attribut vide et aucun attribut, utilisez le sélecteur suivant:

$("div[class=''], div:not([class])");
21
Doug Neiner

Le sélecteur $('div[class=""]') lit essentiellement: "Obtenir tous les éléments div dont l'attribut class a une chaîne vide comme valeur." - Cela exclut tous les éléments div qui ont une valeur ANY dans l'attribut class , autre qu'une chaîne vide, et tous les éléments div qui n'ont aucun attribut de classe défini.

4
Atli