JQuery ile öğe kimliğinde iki nokta üst üste işleme

JQuery kullanarak JS kodunda "test: abc" kimliğine sahip div öğesine erişemiyoruz.

<div id="test:abc">

$('#test:abc') 

Kolon olmadan iyi çalışıyor. Trinidad alt formlarında otomatik olarak oluşturulduğundan kimlik oluşturma üzerinde kontrole sahip değiliz çünkü :içindeki her öğeye alt form kimliği ekliyor .

İki ters eğik çizgi kullanarak iki noktadan kaçmanız gerekir:

$('#test\\:abc')

Kısacası

$(document.getElementById("test:abc")) kullanmanız gereken şey.

Açıklama : Hız kazanımının yanı sıra (aşağıya bakın), kullanımı daha kolaydır.

Örnek: Bir fonksiyonunuz olduğunu varsayalım

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

Hız / Zamanlama

ID'lerin seçim yöntemlerinin hızını iki nokta üst üste ile test eden ve karşılaştıran bu jsbin'e bir göz atın

sonuçları almak için firebug konsolunuzu açmanız gerekir.

Firefox 10 ve jquery 1.7.2 ile test ettim

temelde id'de iki nokta üst üste ile seçili 10.000 kez bir div yaptım - bunu başarmak için farklı yöntemlerle. Sonra sonuçları içinde iki nokta üst üste bulunmayan bir kimlik seçimiyle karşılaştırdım, sonuçlar oldukça şaşırtıcı.

ms cinsinden sol süre sağ seçici yöntemi

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

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

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


71 $("#nocolon")

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

özellikle

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

biraz sürpriz geliyor

Açıkçası, kolonda takılıyor, çünkü jQuery onu bir seçici olarak yorumlamaya çalışıyor. İd özniteliği seçiciyi kullanmayı deneyin.

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

Ben sadece kullanırdım document.getElementByIdve sonucu jQuery()işleve aktarırdım.

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

iki ters eğik çizgi kullanın \\

DEMO

burada yazıldığı gibi

Meta karakterlerden herhangi birini (! "# $% & '() * +,. / :; <=>? @ [] ^` {|} ~ Gibi) bir metnin değişmez bir parçası olarak kullanmak isterseniz adı, iki ters eğik çizgiyle karakterden kaçmalısınız: \. Örneğin, id = "foo.bar" olan bir öğeniz varsa, $ ("# foo \ .bar") seçicisini kullanabilirsiniz. tam içerir

Referans

Toskan'ın cevabına atıfta bulunarak, kodunu biraz daha okunabilir hale getirmek için güncelledim ve ardından sayfaya çıktı.

İşte jbin bağlantısı: http://jsbin.com/ujajuf/14/edit .



Ayrıca, daha fazla yinelemeyle çalıştırdım

Iterations:1000000

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

Hatta daha fazla:

Iterations:10000000

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

kullanmayı dene $('#test\\:abc')

Bu sözdizimi $('[id="test:abc"]') benim için çalıştı. Ben kullanıyorum Netbeans 6.5.1ve idbir : (colon). Denedim \\& \3Aancak bunların hiçbiri çalıştı.

Kullanın $('[id=id:with:colon]').