Manejo de dos puntos en ID de elemento con jQuery

No podemos acceder al elemento div con ID "test: abc" en código JS usando jQuery.

<div id="test:abc">

$('#test:abc') 

Funciona bien sin colon. No tenemos control sobre la generación de ID, ya que se genera automáticamente en subformularios de Trinidad porque adjunta ID de subformulario :a cada elemento dentro de él.

Necesitas escapar del colon usando dos barras diagonales:

$('#test\\:abc')

En breve

$(document.getElementById("test:abc")) es lo que debes usar.

Explicación : Además de la ganancia de velocidad (ver más abajo), es más fácil de manejar.

Ejemplo: digamos que tiene una función

   function doStuff(id){

       var jEle = $("#" + id); //is not safe, since id might be "foo:bar:baz" and thus fail. 
       //You would first have to look for ":" in the id string, then replace it

       var jEle = $(document.getElementById(id)); //forget about the fact 
      //that the id string might contain ':', this always works
    }

    //just to give an idea that the ID might be coming from somewhere unkown
    var retrievedId = $("foo").attr("data-target-id");
    doStuff(retrievedId); 

Velocidad / sincronización

Eche un vistazo a este jsbin que prueba y compara la velocidad de los métodos de selección de ID con dos puntos.

necesitas abrir tu consola firebug para obtener los resultados.

Lo probé con firefox 10 y jquery 1.7.2

básicamente hice una selección de 10.000 veces de un div con dos puntos en la identificación, con los diferentes métodos para lograrlo. Luego comparé los resultados con una selección de ID sin dos puntos, los resultados son bastante sorprendentes.

tiempo restante en el método selector de ms derecho

299 $("#annoying\\:colon")

302 $("[id='annoying:colon']"

20 $(document.getElementById("annoying:colon"))


71 $("#nocolon")

294 $("[id='nocolon']")

especialmente

  71 $("#nocolon") and
299 $("#annoying\\:colon")

viene un poco como sorpresa

Obviamente, se está tropezando con los dos puntos, porque jQuery está tratando de interpretarlo como un selector. Intenta usar el selector de atributos id.

 $('[id="test:abc"]')

Simplemente usaría document.getElementByIdy pasaría el resultado a la jQuery()función.

var e = document.getElementById('test:abc');
$(e) // use $(e) just like $('#test:abc') 

usa dos barras invertidas \\

MANIFESTACIÓN

como está escrito aquí

Si desea utilizar cualquiera de los metacaracteres (como! "# $% & '() * +,. / :; <=>? @ [] ^` {|} ~) Como parte literal de un nombre, debe escapar del carácter con dos barras invertidas: \. Por ejemplo, si tiene un elemento con id = "foo.bar", puede usar el selector $ ("# foo \ .bar"). La especificación CSS del W3C contiene el completo

Referencia

Refiriéndome a la respuesta de Toskan, actualicé su código para hacerlo más legible y luego lo envié a la página.

Aquí está el enlace de jbin: http://jsbin.com/ujajuf/14/edit .



Además, lo ejecuté con más iteraciones

Iterations:1000000

Results:    
12794   $("#annyoing\\:colon")
12954   $("[id='annyoing:colon']"
754 $(document.getElementById("annyoing:colon"))
3294    $("#nocolon")
13516   $("[id='nocolon']")

Aún más:

Iterations:10000000

Results:    
137987  $("#annyoing\\:colon")
140807  $("[id='annyoing:colon']"
7760    $(document.getElementById("annyoing:colon"))
32345   $("#nocolon")
146962  $("[id='nocolon']")

intenta usar $('#test\\:abc')

Esta sintaxis $('[id="test:abc"]') funcionó para mí. Estoy usando Netbeans 6.5.1& genera componentes con un idque contiene a : (colon). Probé el \\& the \3Apero ninguno de ellos funcionó.

Uso $('[id=id:with:colon]').