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

Question

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

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

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

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

Answer 1

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

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

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

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

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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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

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

If you wish to use any of the meta-characters ( such as 
!"#$%&'()*+,./:;?@[\]^`{|}~ ) 
as a literal part of a name, you must escape the character with 
two backslashes: \\. For example, if you have an element with id="foo.bar", 
you can use the selector $("#foo\\.bar"). The W3C CSS specification contains 
the complete set of rules regarding valid CSS selectors. Also useful is the 
blog entry by Mathias Bynens on CSS character escape sequences for identifiers.

Answer 5

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

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

Answer 6

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

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

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

$('#SearchBag\\.CompanyName')

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

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

Answer 7

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

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

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

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

Answer 8

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

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

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

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