Jak wybrać węzły HTML według identyfikatora za pomocą jquery, gdy identyfikator zawiera kropkę?

Jeśli mój HTML wyglądałby tak:

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

Jak mogę wybrać # SearchBag.CompanyName za pomocą JQuery? Nie mogę zmusić go do działania i obawiam się, że to kropka to wszystko psuje. Irytujące jest to, że zmiana nazwy wszystkich moich identyfikatorów byłaby dużo pracy, nie wspominając o utracie czytelności.

Uwaga:
nie zaczynajmy mówić o tym, w jaki sposób tabele nie są tworzone do tworzenia układów. Jestem bardzo świadomy wartości i wad CSS i staram się z niego korzystać w jak największym stopniu.

@Tomalak w komentarzach:

ponieważ selektory identyfikatorów muszą być poprzedzone hashem #, nie powinno być tutaj dwuznaczności

„# Id.class” to prawidłowy selektor, który wymaga zarówno identyfikatora, jak i oddzielnej klasy, aby dopasować; jest ważny i nie zawsze całkowicie zbędny.

Prawidłowy sposób wyboru literału „”. w CSS jest to: „#id \ .moreid”. Powodowało to problemy w niektórych starszych przeglądarkach (w szczególności IE5.x), ale wszystkie nowoczesne przeglądarki stacjonarne obsługują to.

Ta sama metoda wydaje się działać w jQuery 1.3.2, chociaż nie przetestowałem jej dokładnie; quickExpr nie odbiera go, ale wydaje się, że bardziej zaangażowany parser selektora go poprawnie:

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

Jeden wariant byłby następujący:

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

Nie musisz niczego uciekać, jeśli używasz document.getElementById:

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

getElementById zakłada, że ​​dane wejściowe są tylko atrybutem id, więc kropka nie będzie interpretowana jako selektor klasy.

Krótka odpowiedź : jeśli masz element o id = "foo.bar", możesz użyć selektora$("#foo\\.bar")

Dłuższa odpowiedź : jest to część dokumentacji jquery - selektory sekcji, które można znaleźć tutaj: http://api.jquery.com/category/selectors/

Odpowiedź na twoje pytanie znajduje się na początku dokumentacji:

Jeśli chcesz użyć dowolnego z metaznaków (np 
! "# $% & '() * +,. /:;? @ [\] ^` {|} ~) 
jako dosłowna część imienia, musisz uciec od postaci 
dwa odwrotne ukośniki: \\. Na przykład, jeśli masz element o id = "foo.bar",
możesz użyć selektora $ („# foo \\. bar”). Specyfikacja W3C CSS zawiera
pełny zestaw zasad dotyczących prawidłowych selektorów CSS. Przydatny jest również
wpis blogu autorstwa Mathiasa Bynensa na temat sekwencji ucieczki znaków CSS dla identyfikatorów.

wybór attr wydaje się odpowiedni, gdy twój identyfikator znajduje się w zmiennej:

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

Jest to udokumentowane w interfejsie API selektorów jQuery :

Użycie dowolnego z meta-znaków (na przykład !"#$%&'()*+,./:;<=>?@[\]^`{|}~) jako dosłowne część nazwy, należy uciec się z dwóch ukośników: \\. Na przykład element z id="foo.bar", może używać selektora $("#foo\\.bar").

Krótko mówiąc, prefiks .z \\.

$('#SearchBag\\.CompanyName')

Problem polega na tym, .że pasuje do klasy, więc $('#SearchBag.CompanyName')pasuje <div id="SearchBag" class="CompanyName">. Uciekający z \\.będzie traktowany jak normalny, .bez specjalnego znaczenia, pasujący do pożądanego identyfikatora.

Dotyczy to wszystkich znaków, !"#$%&'()*+,./:;<=>?@[\]^`{|}~które w innym przypadku miałyby specjalne znaczenie jako selektor w jQuery.

Chłopaki, którzy szukają bardziej ogólnego rozwiązania, znalazłem jedno rozwiązanie, które wstawia jeden ukośnik przed dowolnymi znakami specjalnymi, co rozwiązuje problemy związane z odzyskiwaniem nazwy i identyfikatora z div zawierającej znaki specjalne.

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

zwraca „Str1 \\. str2 \\% str3”

Mam nadzieję, że to się przyda!

Możesz użyć selektora atrybutów:

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

Lub możesz określić typ elementu:

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