¿Por qué mi selector de jQuery no puede encontrar mi elemento por ID?

Question

Tengo un código con un simple uso del selector de jQuery:

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

estoy usando PrimeFaces, por lo que el HTML se parece a:

<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" /> 

pero plantea un error: "Syntax error, unrecognized expression: txtNumber".

¿Qué estoy haciendo mal?

Answer 1

El símbolo : es uno de los comodines de los selectores utilizados por jQuery (que como apuntado en los comentarios, representa una pseudoclass para el elemento, es decir, input:disabled). Por lo tanto, está tratando de interpretar : como un comodín y no como parte de su id. jQuery cree que su identificación es j_idt23 y la pseudoclass es txtNumber (que no es válida, claro).

Simplemente agregue el \\ antes y jQuery interpretará como texto literal.

Su código se verá así:

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

Answer 2

pensar en el wasy jQuery maneja selectores:

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

Así que cuando su hacer su selección se está expandiendo a:

$("#j_idt23:txtNumber") 

Significado encontrar un elemento con id = 'j_idt23' y pseudo clase 'txtNumber' pero txtNumber no es una pse válida clase udo, y jQuery está confundido.

cambio a algo así como "j_idt23_txtNumber"

Answer 3

Desde sus utilizando PrimeFaces hay una función PrimeFaces.escapeClientId() que escapará del JSF ID utilizable en un jQuery ID.

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

Answer 4

También hay otro enfoque en JSF 2.0. Si eres el confort con, trate de cambiar el separador de carbón directamente a través de "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> 

Este parámetro cambia el contexto global separador de carbón, por ejemplo, j_idt23: txtNumber se convierte en j_idt23§txtNumber.