Obsługa dwukropka w identyfikatorze elementu za pomocą jQuery

Nie możemy uzyskać dostępu do elementu div o identyfikatorze „test: abc” w kodzie JS przy użyciu jQuery.

<div id="test:abc">

$('#test:abc') 

Działa dobrze bez okrężnicy. Nie mamy kontroli nad generowaniem identyfikatora, ponieważ jest on generowany automatycznie w formularzach podrzędnych Trinidad, ponieważ dołącza identyfikator formularza podrzędnego :do każdego elementu w nim zawartego.

Musisz uciec z dwukropka za pomocą dwóch ukośników:

$('#test\\:abc')

W skrócie

$(document.getElementById("test:abc")) jest tym, czego powinieneś użyć.

Wyjaśnienie : Oprócz przyrostu prędkości (patrz poniżej) jest łatwiejszy w obsłudze.

Przykład: załóżmy, że masz funkcję

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

Prędkość / czas

spójrz na ten plik jsbin, który testuje i porównuje szybkość metod wyboru identyfikatorów z dwukropkami

aby uzyskać wyniki, musisz otworzyć konsolę firebuga.

Przetestowałem to z Firefox 10 i jQuery 1.7.2

w zasadzie zrobiłem 10 000 razy div z dwukropkiem w id - z różnymi metodami, aby to osiągnąć. Następnie porównałem wyniki do selekcji ID bez dwukropka, wyniki są dość zaskakujące.

lewy czas w ms prawa metoda selektora

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

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

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


71 $("#nocolon")

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

szczególnie

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

jest trochę zaskoczeniem

Oczywiście potyka się o okrężnicę, ponieważ jQuery próbuje zinterpretować to jako selektor. Spróbuj użyć selektora atrybutu id.

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

Po prostu użyłbym document.getElementByIdi przekazał wynik do jQuery()funkcji.

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

użyj dwóch odwrotnych ukośników \\

PRÓBNY

jak napisano tutaj

Jeśli chcesz użyć któregokolwiek z metaznaków (takich jak! "# $% & '() * +,. / :; <=>? @ [] ^` {|} ~) Jako części dosłownej nazwa, musisz zmienić znaczenie znaku dwoma ukośnikami odwrotnymi: \. Na przykład, jeśli masz element z id = "foo.bar", możesz użyć selektora $ ("# foo \ .bar"). Specyfikacja W3C CSS zawiera kompletny plik

Odniesienie

Nawiązując do odpowiedzi Toskana, zaktualizowałem jego kod, aby był nieco bardziej czytelny, a następnie wyprowadziłem na stronę.

Oto link jbin: http://jsbin.com/ujajuf/14/edit .



Ponadto uruchomiłem go z większą liczbą iteracji

Iterations:1000000

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

Nawet więcej:

Iterations:10000000

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

spróbuj użyć $('#test\\:abc')

Ta składnia $('[id="test:abc"]') działała dla mnie. Używam Netbeans 6.5.1i generuje komponenty z rozszerzeniem, idktóre zawiera : (colon). Próbowałem \\& the, \3Aale żaden z nich nie działał.

Użyj $('[id=id:with:colon]').