Почему мой селектор jQuery не может найти мой элемент по идентификатору?

Question

У меня есть код с использованием простого селектора jQuery:

$("label").each(function () {
    var target = $("#" + $(this).attr("for"));
});

Я использую PrimeFaces, поэтому HTML выглядит так:

<label for="j_idt23:txtNumber">Number:</label>
<input id="j_idt23:txtNumber" name="j_idt23:txtNumber" type="text" value="0" class="ui-inputfield ui-widget ui-state-default ui-corner-all" />

Но возникает ошибка: "Syntax error, unrecognized expression: txtNumber".

Что я делаю не так?

Answer 1

Символ : является одним из подстановочных знаков селекторов, используемых jQuery (который, как указано в комментариях, представляет псевдокласс для элемента, т. Е. input:disabled).Таким образом, он пытается интерпретировать : как шаблон, а не как часть вашего id.jQuery думает, что ваш идентификатор j_idt23, а псевдокласс - txtNumber (который недействителен, конечно).

Просто добавьте \\ перед ним, и jQuery будет интерпретироваться как буквальный текст.

Ваш код будет выглядеть так:

$("label").each(function () {
    var target = $("#" + $(this).attr("for").replace(":", "\\:"));
});

Answer 2

Поскольку вы используете PrimeFaces, есть функция PrimeFaces.escapeClientId(), которая будет экранировать идентификатор JSF в пригодный для использования идентификатор jQuery.

$("label").each(function () {
    var target = $(PrimeFaces.escapeClientId($(this).attr("for")));            
});

Answer 3

Существует также другой подход в JSF 2.0.Если вам удобно, попробуйте изменить символ разделителя напрямую через "web.xml"

<context-param>
    <description>
        Declares the separator char for ids (default is ':')
    </description>
    <param-name>javax.faces.SEPARATOR_CHAR</param-name>
    <param-value>§</param-value>
</context-param>

Этот контекстный параметр изменяет символ разделителя глобально, например, j_idt23: txtNumber становится j_idt23§txtNumber.

Answer 4

Подумайте о том, как селекторные ручки jQuery:

# denotes an id: '#id'
. denotes a class: '.class'
: denotes a pseudo class: ':pseudo_class'

Итак, когда вы делаете свой выбор, он расширяется до:

$("#j_idt23:txtNumber")

Значение найти элемент с id = 'j_idt23' и псевдоклассом 'txtNumber', но txtNumber не является допустимым псевдоклассом, а jQuery запутан.

Измените его на что-то вроде "j_idt23_txtNumber"