Как выбрать узлы HTML по идентификатору с jquery, когда идентификатор содержит точку?

Если мой HTML выглядит так:

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

Как я могу выбрать # SearchBag.CompanyName с JQuery? Я не могу заставить это работать, и я боюсь, что это - точка, которая ломает все это. Раздражает то, что переименование всех моих идентификаторов будет большой работой, не говоря уже о потере читабельности.

Примечание:
пожалуйста, давайте не будем говорить о том, как таблицы не созданы для разметки. Я прекрасно осознаю ценность и недостатки CSS и стараюсь максимально использовать его.

@ Томалак в комментариях:

поскольку селекторам идентификаторов должен предшествовать хэш #, здесь не должно быть никакой двусмысленности

«# Id.class» - допустимый селектор, для которого требуется соответствие как идентификатора, так и отдельного класса; это действительно и не всегда полностью избыточно.

Правильный способ выбора литерала "." в CSS это избежать: «#id \ .moreid». Раньше это вызывало проблемы в некоторых старых браузерах (в частности, IE5.x), но все современные браузеры для настольных компьютеров поддерживают его.

Похоже, что тот же метод работает в jQuery 1.3.2, хотя я не проверял его полностью; quickExpr не подхватывает его, но более сложный синтаксический анализатор выбора, кажется, делает это правильно:

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

Один вариант будет таким:

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

Вам не нужно ничего избегать, если вы используете document.getElementById:

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

getElementById предполагается, что входные данные являются просто атрибутом id, поэтому точка не будет интерпретироваться как селектор класса.

Краткий ответ : если у вас есть элемент с id = "foo.bar", вы можете использовать селектор$("#foo\\.bar")

Более длинный ответ : это часть документации jquery - селекторы разделов, которые вы можете найти здесь: http://api.jquery.com/category/selectors/

На ваш вопрос ответят в самом начале документации:

Если вы хотите использовать любой из метасимволов (например, 
! "# $% & '() * +,. /:;? @ [\] ^` {|} ~) 
как буквальная часть имени, вы должны экранировать 
две обратные косые черты: \\. Например, если у вас есть элемент с id = "foo.bar",
Вы можете использовать селектор $ ("# foo \\. bar"). Спецификация W3C CSS содержит
полный набор правил, касающихся действительных селекторов CSS. Также полезным является
запись в блоге Mathias Bynens о escape-последовательностях символов CSS для идентификаторов.

Выбор attr кажется подходящим, когда ваш идентификатор находится в переменной:

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

Это задокументировано в API селекторов jQuery :

Для того, чтобы использовать любого из мета-символы (например , как !"#$%&'()*+,./:;<=>?@[\]^`{|}~) , как буквальная часть имени, он должен быть экранирован с двойной косой чертой: \\. Например, элемент с id="foo.bar", может использовать селектор $("#foo\\.bar").

Короче, префикс .с \\.

$('#SearchBag\\.CompanyName')

Проблема в том, что .будет соответствовать класс, поэтому $('#SearchBag.CompanyName')будет соответствовать <div id="SearchBag" class="CompanyName">. Экранированный символ \\.будет рассматриваться как обычный, .без особого значения, соответствующего желаемому идентификатору.

Это относится ко всем символам, !"#$%&'()*+,./:;<=>?@[\]^`{|}~которые в противном случае имели бы особое значение как селектор в jQuery.

Ребята, которые ищут более общее решение, я нашел одно решение, которое вставляет одну обратную косую черту перед любыми специальными символами, это решает проблемы, связанные с получением имени и идентификатора из div, который содержит специальные символы.

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

возвращает "Str1 \\. str2 \\% str3"

Надеюсь, это полезно!

Вы можете использовать селектор атрибута:

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

Или вы можете указать тип элемента:

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