web-dev-qa-db-fra.com

Sélection d'un ID avec deux points dedans avec jQuery

Je travaille sur un module pré-écrit pour un site, et je dois cibler un élément avec l'ID test:two. Maintenant, cet élément contient deux points, donc jQuery voit vraisemblablement et naturellement les "deux" comme une pseudo-classe. Existe-t-il un moyen de cibler cet élément avec jQuery?

De plus, la modification de l'ID n'est pas possible. Croyez-moi, si je le pouvais, je le ferais.

J'ai rassemblé un exemple:

$('#test').css('background','red');
$(document.getElementById('test:two')).css('background','blue');
$('#test:two').css('background','green');
<script src="//code.jquery.com/jquery-1.6.3.js"></script>

<div id="test">test</div>
<div id="test:two">test two</div>
javascriptjqueryidentifiercolon
41
Geoff

Échappez simplement aux deux points avec un \\:

$('#test\\:two');

http://jsfiddle.net/zbX8K/3/

Voir la documentation: Comment puis-je sélectionner un élément par un ID dont les caractères sont utilisés en notation CSS?.

76
Joseph Silber

De les documents du sélecteur d'ID jQuery :

Si l'id contient des caractères comme des points ou des deux points, vous devez échapper ces caractères avec des barres obliques inverses .

Parce que la barre oblique inverse elle-même doit être échappée dans la chaîne, vous devrez faire ceci:

$("#test\\:two")

$('#test').css('background','red');
$(document.getElementById('test:two')).css('background','blue');
$('#test\\:two').css('background','green');
<script src="//code.jquery.com/jquery-1.6.3.js"></script>

<div id="test">test</div>
<div id="test:two">test two</div>

Vous avez maintenant également la possibilité d'utiliser la fonction intégrée CSS.escape(...), qui prend en charge tous les caractères qui pourraient avoir une signification spéciale à l'intérieur d'une expression de sélecteur.

$("#" + CSS.escape("test:two"))

$('#test').css('background','red');
$(document.getElementById('test:two')).css('background','blue');
$("#" + CSS.escape("test:two")).css('background','green');
<script src="//code.jquery.com/jquery-1.6.3.js"></script>

<div id="test">test</div>
<div id="test:two">test two</div>
13
Jeremy Banks

Utilisez le attribut égal au sélecteur .

$('[id="test:two"]')
11
Rocket Hazmat

Essayez d'utiliser un sélecteur d'attribut

$(document).ready(function() {
    $('div[id="test:two"]').each(function() {
       alert($(this).text());
    }); 
});

Violon: http://jsfiddle.net/zbX8K/2/

7
JaredPar