Come selezionare i nodi HTML per ID con jquery quando l'id contiene un punto?

Se il mio HTML fosse così:

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

Come posso selezionare # SearchBag.CompanyName con JQuery? Non riesco a farlo funzionare e temo che sia il punto a spezzare tutto. La cosa fastidiosa è che rinominare tutti i miei ID sarebbe un sacco di lavoro, per non parlare della perdita di leggibilità.

Nota: per
favore non iniziamo a parlare di come le tabelle non sono fatte per il layout. Sono molto consapevole del valore e delle carenze dei CSS e faccio del mio meglio per usarlo il più possibile.

@Tomalak nei commenti:

poiché i selettori ID devono essere preceduti da un hash #, qui non ci dovrebbero essere ambiguità

"# Id.class" è un selettore valido che richiede sia un id che una classe separata per la corrispondenza; è valido e non sempre totalmente ridondante.

Il modo corretto di selezionare un "." Letterale nel CSS è scappare: "#id \ .moreid". Questo causava problemi in alcuni browser meno recenti (in particolare IE5.x), ma tutti i browser desktop moderni lo supportano.

Lo stesso metodo sembra funzionare in jQuery 1.3.2, anche se non l'ho testato a fondo; quickExpr non lo prende, ma il parser selettore più coinvolto sembra farlo bene:

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

Una variante sarebbe questa:

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

Non è necessario sfuggire a nulla se si utilizza document.getElementById:

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

getElementById presuppone che l'input sia solo un attributo id, quindi il punto non verrà interpretato come un selettore di classe.

Risposta breve : se si dispone di un elemento con id = "foo.bar", è possibile utilizzare il selettore$("#foo\\.bar")

Risposta più lunga : fa parte della documentazione di jquery - selettori di sezione che puoi trovare qui: http://api.jquery.com/category/selectors/

Alla tua domanda viene data risposta all'inizio della documentazione:

Se desideri utilizzare uno dei meta-caratteri (come 
! "# $% & '() * +,. /:;? @ [\] ^` {|} ~) 
come parte letterale di un nome, devi sfuggire al personaggio con 
due barre rovesciate: \\. Ad esempio, se hai un elemento con id = "foo.bar",
puoi usare il selettore $ ("# foo \\. bar"). La specifica CSS W3C contiene
l'insieme completo delle regole relative ai selettori CSS validi. Utile anche il
post di blog di Mathias Bynens sulle sequenze di escape dei caratteri CSS per identificatori.

attr selection sembra essere appropriato quando il tuo ID è in una variabile:

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

Questo è documentato nell'API dei selettori jQuery :

Per utilizzare uno dei meta-caratteri (come ad esempio !"#$%&'()*+,./:;<=>?@[\]^`{|}~) come una parte letterale di un nome, deve essere sfuggito con con due barre rovesciate: \\. Ad esempio, un elemento con id="foo.bar", può utilizzare il selettore $("#foo\\.bar").

In breve, prefisso il .con \\.

$('#SearchBag\\.CompanyName')

Il problema è che .corrisponderà a una classe, quindi $('#SearchBag.CompanyName')corrisponderebbe <div id="SearchBag" class="CompanyName">. I fuggiti \\.verranno trattati come normali .senza alcun significato speciale, corrispondenti all'ID desiderato.

Questo vale per tutti i personaggi !"#$%&'()*+,./:;<=>?@[\]^`{|}~che altrimenti avrebbero un significato speciale come selettore in jQuery.

Ragazzi che sono alla ricerca di una soluzione più generica, ho trovato una soluzione che inserisce una barra rovesciata prima di qualsiasi carattere speciale, questo risolve i problemi relativi al recupero di nome e ID da un div che contiene caratteri speciali.

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

restituisce "Str1 \\. str2 \\% str3"

Spero che questo sia utile!

È possibile utilizzare un selettore di attributi:

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

Oppure puoi specificare il tipo di elemento:

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