Como selecionar nós html por ID com jquery quando o ID contém um ponto?

Se meu html estivesse assim:

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

Como eu selecionei # SearchBag.CompanyName com JQuery? Não consigo fazê-lo funcionar e temo que seja o ponto que está quebrando tudo. O irritante é que renomear todos os meus IDs seria muito trabalhoso, sem mencionar a perda de legibilidade.

Nota:
Por favor, não vamos começar a falar sobre como as tabelas não são feitas para layout. Estou muito ciente do valor e das deficiências do CSS e tento usá-lo o máximo possível.

@Tomalak nos comentários:

como os seletores de ID devem ser precedidos por um hash #, não deve haver ambiguidade aqui

"# Id.class" é um seletor válido que requer que um id e uma classe separada correspondam; é válido e nem sempre totalmente redundante.

A maneira correta de selecionar um literal '.' em CSS é escapar: “#id \ .moreid”. Isso costumava causar problemas em alguns navegadores mais antigos (em particular o IE5.x), mas todos os navegadores de desktop modernos são compatíveis.

O mesmo método parece funcionar no jQuery 1.3.2, embora eu não o tenha testado completamente; O quickExpr não atende, mas o analisador de seletor mais envolvido parece acertar:

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

Uma variante seria esta:

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

Você não precisa escapar de nada se usar document.getElementById:

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

getElementById assume que a entrada é apenas um atributo id, portanto o ponto não será interpretado como um seletor de classe.

Resposta curta : Se você possui um elemento com id = "foo.bar", pode usar o seletor$("#foo\\.bar")

Resposta mais longa : isso faz parte da documentação do jquery - seletores de seção que você pode encontrar aqui: http://api.jquery.com/category/selectors/

Sua pergunta é respondida logo no início da documentação:

Se você deseja usar qualquer um dos meta-caracteres (como 
! "# $% & '() * +,. /:;? @ [\] ^` {|} ~) 
como parte literal de um nome, você deve escapar do personagem com 
duas barras invertidas: \\. Por exemplo, se você tiver um elemento com id = "foo.bar",
você pode usar o seletor $ ("# foo \\. bar"). A especificação CSS do W3C contém
o conjunto completo de regras sobre seletores CSS válidos. Também é útil o
entrada do blog de Mathias Bynens em seqüências de escape de caracteres CSS para identificadores.

A seleção de attr parece apropriada quando seu ID está em uma variável:

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

Isso está documentado na API de seletores do jQuery :

Para usar qualquer um dos meta-caracteres (tais como !"#$%&'()*+,./:;<=>?@[\]^`{|}~) como uma parte literal de um nome, deve ser escapado com com duas barras invertidas: \\. Por exemplo, um elemento com id="foo.bar", pode usar o seletor $("#foo\\.bar").

Em suma, prefixe o .com \\.

$('#SearchBag\\.CompanyName')

O problema é que .corresponderá a uma classe, portanto $('#SearchBag.CompanyName')corresponderá <div id="SearchBag" class="CompanyName">. Os que escaparam \\.serão tratados como normais, .sem significado especial, correspondendo ao ID que você deseja.

Isso se aplica a todos os caracteres !"#$%&'()*+,./:;<=>?@[\]^`{|}~que, de outra forma, teriam um significado especial como seletor no jQuery.

Caras que procuram uma solução mais genérica, encontrei uma solução que insere uma barra invertida antes de qualquer caractere especial, isso resolve problemas relacionados à recuperação de nome e ID de uma div que contém caracteres especiais.

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

retorna "Str1 \\. str2 \\% str3"

Espero que isso seja útil!

Você pode usar um seletor de atributos:

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

Ou você pode especificar o tipo de elemento:

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