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

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

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

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

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

Ответ 1

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

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

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

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

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

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

Ответ 2

Один из вариантов:

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

Ответ 3

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

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

getElementById предполагает, что вход является атрибутом id, поэтому точка не будет интерпретироваться как селектор классов. Кроме того, он быстрее, чем $('#strange\\.id\\[\\]'), который будет вызывать getElementById внутренне.

Ответ 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 
!"#$%&'()*+,./:;[email protected][\]^`{|}~ ) 
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.

Ответ 5

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

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

Ответ 6

Это описано в jQuery selectors API:

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

Короче говоря, префикс . с помощью \\.

$('#SearchBag\\.CompanyName')

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

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

Ответ 7

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

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

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

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

Ответ 8

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

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

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

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