Wie wähle ich HTML-Knoten nach ID mit jquery aus, wenn die ID einen Punkt enthält?

Wenn mein HTML so aussah:

<td class="controlCell">
    <input class="inputText" id="SearchBag.CompanyName" name="SearchBag.CompanyName" type="text" value="" />
</td>

Wie kann ich mit JQuery # SearchBag.CompanyName auswählen? Ich kann es nicht zum Laufen bringen und ich fürchte, es ist der Punkt, der alles kaputt macht. Das ärgerliche ist, dass das Umbenennen aller meiner IDs eine Menge Arbeit bedeuten würde, ganz zu schweigen von dem Verlust der Lesbarkeit.

Hinweis:
Bitte lassen Sie uns nicht darüber sprechen, wie Tabellen nicht für das Layout erstellt werden. Ich bin mir des Werts und der Mängel von CSS sehr bewusst und bemühe mich , es so weit wie möglich zu nutzen.

@Tomalak in Kommentaren:

Da ID-Selektoren ein Hash # vorangestellt werden muss, sollte hier keine Mehrdeutigkeit bestehen

"# Id.class" ist ein gültiger Selektor, für dessen Übereinstimmung sowohl eine ID als auch eine separate Klasse erforderlich sind. es ist gültig und nicht immer völlig überflüssig.

Der richtige Weg, um ein Literal '.' in CSS ist es zu entkommen: "#id \ .moreid". Dies verursachte früher in einigen älteren Browsern (insbesondere IE5.x) Probleme, wird jedoch von allen modernen Desktop-Browsern unterstützt.

Die gleiche Methode scheint in jQuery 1.3.2 zu funktionieren, obwohl ich sie nicht gründlich getestet habe. quickExpr nimmt es nicht auf, aber der komplexere Selektor-Parser scheint es richtig zu machen:

$('#SearchBag\\.CompanyName');

Eine Variante wäre diese:

$("input[id='SearchBag.CompanyName']")

Sie müssen nichts entkommen, wenn Sie Folgendes verwenden document.getElementById:

$(document.getElementById('strange.id[]'))

getElementById Angenommen, die Eingabe ist nur ein ID-Attribut, sodass der Punkt nicht als Klassenselektor interpretiert wird.

Kurze Antwort : Wenn Sie ein Element mit id = haben "foo.bar", können Sie den Selektor verwenden$("#foo\\.bar")

Längere Antwort : Dies ist Teil der jquery-Dokumentation - Abschnittsauswahl, die Sie hier finden: http://api.jquery.com/category/selectors/

Ihre Frage wird gleich zu Beginn der Dokumentation beantwortet:

Wenn Sie eines der Metazeichen verwenden möchten (z 
! "# $% & '() * + ,. /:;? @ [\] ^` {|} ~) 
Als wörtlicher Teil eines Namens müssen Sie dem Charakter mit entkommen 
zwei Backslashes: \\. Wenn Sie beispielsweise ein Element mit id = "foo.bar" haben,
Sie können den Selektor $ ("# foo \\. bar") verwenden. Die W3C-CSS-Spezifikation enthält
das vollständige Regelwerk für gültige CSS-Selektoren. Ebenfalls nützlich ist das
Blogeintrag von Mathias Bynens über CSS-Zeichen-Escape-Sequenzen für Bezeichner.

Die Auswahl von attr scheint angemessen zu sein, wenn sich Ihre ID in einer Variablen befindet:

var id_you_want='foo.bar';
$('[id="' + id_you_want + '"]');

Dies ist in der jQuery-Selektor-API dokumentiert :

Um eines der Metazeichen (z. B. !"#$%&'()*+,./:;<=>?@[\]^`{|}~) als wörtlichen Teil eines Namens zu verwenden, muss es mit zwei umgekehrten Schrägstrichen versehen werden : \\. Beispielsweise kann ein Element mit id="foo.bar"den Selektor verwenden $("#foo\\.bar").

Kurz gesagt, stellen Sie das .mit voran \\.

$('#SearchBag\\.CompanyName')

Das Problem ist, dass .eine Klasse übereinstimmt, also $('#SearchBag.CompanyName')übereinstimmen würde <div id="SearchBag" class="CompanyName">. Das Escape mit \\.wird als normal .ohne besondere Bedeutung behandelt und entspricht der gewünschten ID.

Dies gilt für alle Zeichen, !"#$%&'()*+,./:;<=>?@[\]^`{|}~die sonst als Selektor in jQuery eine besondere Bedeutung hätten.

Leute, die nach einer allgemeineren Lösung suchen, ich habe eine Lösung gefunden, die einen Schrägstrich vor Sonderzeichen einfügt. Dies behebt Probleme im Zusammenhang mit dem Abrufen von Name und ID aus einem Div, der Sonderzeichen enthält.

"Str1.str2% str3" .replace (/ [^ \ w \ s] / gi, '\\ $ &')

gibt "Str1 \\. str2 \\% str3" zurück

Hoffe das ist nützlich!

Sie können einen Attributselektor verwenden:

$("[id='SearchBag.CompanyName']");

Oder Sie können den Elementtyp angeben:

$("input[id='SearchBag.CompanyName']");