¿Cómo seleccionar nodos html por ID con jquery cuando la identificación contiene un punto?

Si mi html se ve así:

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

¿Cómo puedo seleccionar # SearchBag.CompanyName con JQuery? No puedo hacer que funcione y me temo que es el punto lo que lo está rompiendo todo. Lo molesto es que renombrar todas mis identificaciones sería mucho trabajo, sin mencionar la pérdida de legibilidad.

Nota:
No comencemos a hablar sobre cómo las tablas no están hechas para el diseño. Soy muy consciente del valor y las deficiencias de CSS y trato de usarlo lo más posible.

@Tomalak en comentarios:

dado que los selectores de ID deben ir precedidos de un hash #, no debe haber ambigüedad aquí

"# Id.class" es un selector válido que requiere una identificación y una clase separada para que coincida; Es válido y no siempre es totalmente redundante.

La forma correcta de seleccionar un literal '.' en CSS es escapar de él: "#id \ .moreid". Esto solía causar problemas en algunos navegadores antiguos (en particular IE5.x), pero todos los navegadores de escritorio modernos lo admiten.

El mismo método parece funcionar en jQuery 1.3.2, aunque no lo he probado a fondo; quickExpr no lo recoge, pero el analizador selector más involucrado parece acertar:

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

Una variante sería esta:

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

No necesita escapar de nada si usa document.getElementById:

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

getElementById asume que la entrada es solo un atributo id, por lo que el punto no se interpretará como un selector de clase.

Respuesta corta : si tiene un elemento con id = "foo.bar", puede usar el selector$("#foo\\.bar")

Respuesta más larga : Esto es parte de la documentación de jquery - selectores de sección que puede encontrar aquí: http://api.jquery.com/category/selectors/

Su pregunta se responde justo al comienzo de la documentación:

Si desea utilizar cualquiera de los metacaracteres (como 
! "# $% & '() * +,. /:;? @ [\] ^` {|} ~) 
como parte literal de un nombre, debes escapar del personaje con 
dos barras invertidas: \\. Por ejemplo, si tiene un elemento con id = "foo.bar",
puede usar el selector $ ("# foo \\. bar"). La especificación CSS del W3C contiene
El conjunto completo de reglas sobre selectores CSS válidos. También es útil el
entrada de blog de Mathias Bynens sobre secuencias de escape de caracteres CSS para identificadores.

La selección de atributos parece ser apropiada cuando su ID está en una variable:

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

Esto está documentado en la API de selectores jQuery :

Para utilizar cualquiera de los meta-caracteres (tales como !"#$%&'()*+,./:;<=>?@[\]^`{|}~) como una parte literal de un nombre, hay que escapó con dos barras invertidas con: \\. Por ejemplo, un elemento con id="foo.bar", puede usar el selector $("#foo\\.bar").

En resumen, prefije el .con \\.

$('#SearchBag\\.CompanyName')

El problema es que .coincidirá con una clase, por $('#SearchBag.CompanyName')lo que coincidiría <div id="SearchBag" class="CompanyName">. El escapado \\.será tratado como normal .sin un significado especial, coincidiendo con la identificación que desee.

Esto se aplica a todos los caracteres !"#$%&'()*+,./:;<=>?@[\]^`{|}~que de otro modo tendrían un significado especial como selector en jQuery.

Chicos que buscan una solución más genérica, encontré una solución que inserta una barra hacia atrás antes de cualquier carácter especial, esto resuelve problemas relacionados con la recuperación de nombre e ID de un div que contiene caracteres especiales.

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

devuelve "Str1 \\. str2 \\% str3"

Espero que esto sea útil!

Puede usar un selector de atributos:

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

O puede especificar el tipo de elemento:

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