ID jquery avec espaces

Est-ce que quelqu'un sait comment sélectionner un élément dans le DOM par ID avec jQuery, lorsque cet ID a un espace?

Par exemple, l'ID de mon article serait

<div id="content Module">Stuff</div>

Comment le sélectionnerais-je avec jQuery?

Si je fais juste

$("#content Module").whatever() 

jQuery essaiera de trouver un élément avec à la fois l'ID du contenu et l'ID du module, ce qui n'est pas ce que je recherche.

Je devrais ajouter que je travaille avec une ancienne base de code où ces deux identifiants de mot sont largement utilisés, donc passer en revue et changer tous les identifiants serait mauvais.

Utilisez un sélecteur d'attribut.

$("[id='content Module']").whatever();

Ou, mieux, spécifiez également la balise:

$("div[id='content Module']").whatever();

Notez que contrairement à $ ('# id'), cela renverra plusieurs éléments si vous avez plusieurs éléments avec le même identifiant dans votre page.

N'utilisez pas d'espaces, la raison en est simple, le caractère espace n'est pas un attribut valide pour ID.

Les jetons d'identification doivent commencer par une lettre ([A-Za-z]) et peuvent être suivis de n'importe quel nombre de lettres, chiffres ([0-9]), tirets ("-"), traits de soulignement ("_"), deux-points (":") et des points (".").

Mais si vous ne vous souciez pas des normes, essayez $("[id='content Module']")

Sujet similaire> Quelles sont les valeurs valides pour l'attribut id en HTML?

Edit: Comment l'ID diffère entre HTML 4.01 et HTML5

HTML5 supprime les restrictions supplémentaires sur l'attribut id. Les seules exigences restantes - en plus d'être unique dans le document - sont que la valeur doit contenir au moins un caractère (ne peut pas être vide) et qu'elle ne peut pas contenir de caractères d'espacement.

Lien: http://mathiasbynens.be/notes/html5-id-class

Juste au cas où quelqu'un serait curieux, j'ai trouvé que s'échapper de l'espace fonctionnera. Ceci est particulièrement utile lorsque vous n'avez pas de contrôle sur le DOM cible (par exemple à partir d'un script utilisateur):

$("#this\\ has\\ spaces");

Notez la double barre oblique inverse, qui est obligatoire.

La méthode suggérée par Chris peut probablement être adaptée pour fonctionner avec les fonctions jQuery.

var element = document.getElementById('content Module');
$(element) ... ;

Une idée à essayer:

$("#content" +   + "Module").whatever()

$("#content" + %20 + "Module").whatever()

Le point-virgule peut provoquer une erreur javascript. Je recommande également de changer l'ID pour ne pas avoir d'espace.

Essayez aussi document.getElementByID("content Module")

Cela a fonctionné pour moi.

document.getElementById(escape('content Module'));

Bien qu'il soit techniquement invalide d'avoir un espace dans une valeur d'attribut ID en HTML , vous pouvez en fait le sélectionner à l'aide de jQuery.

Voir http://mothereffingcssescapes.com/#content%20module :

<script>
  // document.getElementById or similar
  document.getElementById('content module');
  // document.querySelector or similar
  $('#content\\ module');
</script>

jQuery utilise une syntaxe semblable à l'API Selectors, vous pouvez donc l'utiliser $('#content\\ module');pour sélectionner l'élément avec id="content module".

Pour cibler l'élément en CSS, vous pouvez l'échapper comme ceci:

<style>
  #content\ module {
    background: hotpink;
  }
</style>

cela peut fonctionner si vous voulez que l'élément ait la valeur exacte de l'id

$("[id='content Module']").whatever();

mais si vous voulez vérifier si l'élément n'a qu'un seul d'entre eux (tout comme la classe) avec ou sans autres identifiants

$("[id~='content']").whatever();

cela sélectionnera l'élément s'il a id="content"ou id="content Module"ouid="content Module other_ids"

J'ai trouvé pour mon cas que l'évasion ne fonctionnait pas car elle remplace les espaces par% 20. J'ai utilisé replace à la place, par exemple, pour remplacer le h1 de la page par le texte d'un élément de liste. Si le menu contient:

<li id="Contact Us"\>Contact Us</li>

function setTitle(menu) {
    $("h1").text( $("li#" + menu.replace(" ", "\\ ")).text() );
}

J'avais des problèmes avec les identifiants d'élément contenant des virgules et / ou des espaces dans jQuery, alors j'ai fait cela et cela a fonctionné comme un charme:

var ele = $(document.getElementById('last, first'));

Cela a des espaces et ne fonctionne pas:

var ele = $('#last, first');

Cela a une virgule et ne fonctionne pas:

var ele = $('#last,first');

Échapper à tout caractère divers sur le sélecteur (avec des espaces) .

var escapeSelector = function(string) {
  string = string||"";
  if (typeof string !== 'string') return false;
    return string.replace( /(:|\.|\[|\]|,|=|@|\s|\(|\))/g, "\\$1" );

}
console.log($("div[data-id="+escapeSelector("Document (0).json")+"]").text());   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-id="Document (0).json">Howdy</div>