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认为你的id是j_idt23而伪类是txtNumber（肯定是无效的。）

只需在其前添加\\，jQuery就会将其解释为文字文字。

您的代码如下所示：

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

Answer 2

由于您使用的是PrimeFaces，因此有一个函数PrimeFaces.escapeClientId()可以将JSF ID转义为可用的jQuery ID。

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

Answer 3

想想wasy 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"

Answer 4

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>

此上下文参数全局更改分隔符char，例如j_idt23：txtNumber变为j_idt23§txtNumber。

为什么我的jQuery选择器无法通过id找到我的元素？

4 个答案: