jquery IDs mit Leerzeichen

Weiß jemand, wie man mit jQuery ein Element im DOM nach ID auswählt, wenn diese ID ein Leerzeichen hat?

Zum Beispiel wäre die ID meines Artikels

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

Wie würde ich dies mit jQuery auswählen?

Wenn ich es nur tue

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

jQuery wird versuchen, ein Element zu finden, das sowohl die ID des Inhalts als auch die ID des Moduls enthält. Dies ist nicht das, wonach ich suche.

Ich sollte hinzufügen, dass ich mit einer alten Codebasis arbeite, in der diese beiden Wort-IDs häufig verwendet werden. Daher wäre es schlecht, alle IDs durchzugehen und zu ändern.

Verwenden Sie eine Attributauswahl.

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

Oder geben Sie besser auch das Tag an:

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

Beachten Sie, dass im Gegensatz zu $ ​​('# id') mehrere Elemente zurückgegeben werden, wenn Ihre Seite mehrere Elemente mit derselben ID enthält.

Verwenden Sie keine Leerzeichen. Der Grund dafür ist einfach. Das Leerzeichen ist für das ID-Attribut nicht gültig.

ID-Token müssen mit einem Buchstaben ([A-Za-z]) beginnen und können von einer beliebigen Anzahl von Buchstaben, Ziffern ([0-9]), Bindestrichen ("-"), Unterstrichen ("_") und Doppelpunkten gefolgt werden (":") und Punkte (".").

Aber wenn Sie sich nicht für Standards interessieren, versuchen Sie es $("[id='content Module']")

Ähnlicher Thread> Was sind gültige Werte für das ID-Attribut in HTML?

Bearbeiten: Wie sich die ID zwischen HTML 4.01 und HTML5 unterscheidet

HTML5 beseitigt die zusätzlichen Einschränkungen für das ID-Attribut. Die einzigen verbleibenden Anforderungen - abgesehen davon, dass sie im Dokument eindeutig sind - sind, dass der Wert mindestens ein Zeichen enthalten muss (darf nicht leer sein) und dass er keine Leerzeichen enthalten darf.

Verknüpfung: http://mathiasbynens.be/notes/html5-id-class

Nur für den Fall, dass jemand neugierig ist, habe ich festgestellt, dass es funktionieren wird, dem Raum zu entkommen. Dies ist besonders nützlich, wenn Sie keine Kontrolle über das Ziel-DOM haben (z. B. aus einem Benutzer-Skript heraus):

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

Beachten Sie den erforderlichen doppelten Backslash.

Die von Chris vorgeschlagene Methode kann wahrscheinlich an die Arbeit mit jQuery-Funktionen angepasst werden.

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

Eine Idee zum Ausprobieren:

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

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

Das Semikolon kann einen Javascript-Fehler verursachen. Ich empfehle auch, die ID so zu ändern, dass keine Leerzeichen vorhanden sind.

Probiere auch document.getElementByID("content Module")

Das hat bei mir funktioniert.

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

Es ist zwar technisch ungültig, ein Leerzeichen in einem ID-Attributwert in HTML zu haben , können Sie es tatsächlich mit jQuery auswählen.

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

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

jQuery verwendet eine Selectors-API-ähnliche Syntax, sodass Sie $('#content\\ module');das Element mit auswählen können id="content module".

Um das Element in CSS als Ziel festzulegen, können Sie es folgendermaßen umgehen:

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

Dies kann funktionieren, wenn das Element den genauen Wert für die ID haben soll

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

Wenn Sie jedoch überprüfen möchten, ob das Element nur eines davon (genau wie die Klasse) mit oder ohne andere IDs hat

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

Dadurch wird das Element ausgewählt, wenn es id="content"oder id="content Module"oder hatid="content Module other_ids"

Ich habe für meinen Fall festgestellt, dass Escape nicht funktioniert, da Leerzeichen durch% 20 ersetzt werden. Ich habe stattdessen Ersetzen verwendet, z. B. um das h1 der Seite durch den Text eines Listenelements zu ersetzen. Wenn das Menü enthält:

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

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

Ich hatte Probleme mit Element-IDs, die Kommas und / oder Leerzeichen in jQuery enthielten, also tat ich dies und es funktionierte wie ein Zauber:

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

Dies hat Leerzeichen und funktioniert nicht:

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

Dies hat Komma und funktioniert nicht:

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

Escapezeichen für verschiedene Zeichen auf dem Selektor (zusammen mit Leerzeichen) .

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>