Behandlung des Doppelpunkts in der Element-ID mit jQuery

Wir können mit jQuery nicht auf das div-Element mit der ID "test: abc" im JS-Code zugreifen.

<div id="test:abc">

$('#test:abc') 

Es funktioniert gut ohne Doppelpunkt. Wir haben keine Kontrolle über die ID-Generierung, da diese in Trinidad-Unterformularen automatisch generiert wird, da :jedem Element darin eine Unterformular-ID zugeordnet wird .

Sie müssen dem Doppelpunkt mit zwei Schrägstrichen entkommen:

$('#test\\:abc')

Zusamenfassend

$(document.getElementById("test:abc")) ist das, was Sie verwenden sollten.

Erläuterung : Abgesehen von der Geschwindigkeitssteigerung (siehe weiter unten) ist die Handhabung einfacher.

Beispiel: Angenommen, Sie haben eine Funktion

   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); 

Geschwindigkeit / Timing

Schauen Sie sich diesen jsbin an, der die Geschwindigkeit der Auswahlmethoden von IDs mit Doppelpunkten testet und vergleicht

Sie müssen Ihre Firebug-Konsole öffnen, um die Ergebnisse zu erhalten.

Ich habe es mit Firefox 10 und jquery 1.7.2 getestet

Im Grunde habe ich 10'000 Mal eine Div mit einem Doppelpunkt in der ID ausgewählt - mit den verschiedenen Methoden, um dies zu erreichen. Dann habe ich die Ergebnisse mit einer ID-Auswahl ohne Doppelpunkt verglichen. Die Ergebnisse sind ziemlich überraschend.

linke Zeit in ms rechte Auswahlmethode

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

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

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


71 $("#nocolon")

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

insbesondere

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

kommt ein bisschen überraschend

Es stolpert offensichtlich über den Doppelpunkt, weil jQuery versucht, ihn als Selektor zu interpretieren. Versuchen Sie es mit der ID-Attributauswahl.

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

Ich würde nur verwenden document.getElementByIdund das Ergebnis an die jQuery()Funktion übergeben.

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

Verwenden Sie zwei Backslash \\

DEMO

wie hier geschrieben

Wenn Sie eines der Metazeichen (wie! "# $% & '() * + ,. /:; <=>? @ [] ^` {|} ~) Als wörtlichen Teil von a verwenden möchten Name, Sie müssen das Zeichen mit zwei Backslashes maskieren: \. Wenn Sie beispielsweise ein Element mit id = "foo.bar" haben, können Sie den Selektor $ ("# foo \ .bar") verwenden. Die W3C-CSS-Spezifikation enthält das komplette

Referenz

In Bezug auf Toskans Antwort habe ich seinen Code aktualisiert, um ihn etwas lesbarer zu machen, und ihn dann auf der Seite ausgegeben.

Hier ist der jbin-Link: http://jsbin.com/ujajuf/14/edit .



Außerdem habe ich es mit mehr Iterationen ausgeführt

Iterations:1000000

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

Sogar mehr:

Iterations:10000000

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

versuchen Sie es mit $('#test\\:abc')

Diese Syntax $('[id="test:abc"]') hat bei mir funktioniert. Ich benutze Netbeans 6.5.1& es generiert Komponenten mit einem id, der a enthält : (colon). Ich habe das \\& das ausprobiert, \3Aaber keiner von ihnen hat funktioniert.

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