Échapper aux crochets lors de l'attribution d'un nom de classe à un élément

Question

Quelqu'un sait-il comment échapper au caractère crochet lors de la définition d'un nom de classe avec jQuery ?

Essayez ce qui suit :

$('#txtFirstname').addClass('test[someval]')

puis

$('#txtFirstname').attr('class')

vous verrez que la classe est là.

Essayez maintenant

$('#txtFirstname').hasClass('test[someval]')

FAIL

La seule raison à laquelle je peux penser est les crochets.

Et j'en ai besoin pour ma validation jQuery, vous voyez.

Answer 1

Échappez avec DEUX (2) barres obliques inversées.

http://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/

Answer 2

L'introduction de Page de l'API jQuery donne l'explication ci-dessus à ce sujet :

Pour utiliser l'un des métacaractères ( tels que !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) en tant que partie littérale d'un nom, il doit être être échappé par deux barres obliques inversées : \\.

Answer 3

Si le sélecteur est contenu dans une variable (ou si vous pouvez le faire entrer dans une variable), le code ci-dessous peut être utile :

selector_name = $this.attr('class');
//e.g selector_name = users[0][first:name]

escaped_selector_name = selector_name.replace(/(:|\.|\[|\])/g,'\\$1');
//e.g escaped_selector_name = users\\[0\\]\\[first\\:name\\]

En bref, nous préfixons tous les caractères spéciaux par un double backslash. Voici de la documentation supplémentaire provenant du site de jQuery :

http://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/

Answer 4

Réponse courte : vous n'avez pas besoin d'échapper aux parenthèses parce que l'argument est un nom de la classe et non un sélecteur . Il n'a pas fonctionné pour vous en raison d'un bogue dans les versions antérieures de jQuery qui a été corrigé depuis longtemps.

Pour le démontrer, voici votre code s'exécutant sous différentes versions :

• jQuery/1.3.2 (bogué) :

  $('#txtFirstname').addClass('test[someval]') $('#txtFirstname').attr('class') console.log($('#txtFirstname').hasClass('test[someval]'));

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <div id="txtFirstname"></div>

• jQuery/1.4.0 (corrigé) :

  $('#txtFirstname').addClass('test[someval]') $('#txtFirstname').attr('class') console.log($('#txtFirstname').hasClass('test[someval]'));

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <div id="txtFirstname"></div>

Donc le problème a été apparemment corrigé sur jQuery/1.4.0. J'ai trouvé un billet à ce sujet (bien qu'il soit marqué comme étant corrigé en 1.4.2 plutôt qu'en 1.4.0).

J'insiste : la règle de citer ou d'échapper les métacaractères avec \\ afin de les utiliser comme partie littérale d'un nom ne s'applique qu'à sélectionneurs . Cependant, le .hasClass() ne reçoit pas un sélecteur comme argument mais comme nom de classe :

.hasClass( className )

    className
    Type: String
    The class name to search for.