Menangani titik dua dalam elemen ID dengan jQuery

Kami tidak dapat mengakses elemen div dengan ID "test: abc" dalam kode JS menggunakan jQuery.

<div id="test:abc">

$('#test:abc') 

Ini bekerja dengan baik tanpa titik dua. Kami tidak memiliki kontrol pada pembuatan ID karena dibuat secara otomatis di sub-form Trinidad karena ia melampirkan sub-form ID dengan :setiap elemen di dalamnya.

Anda perlu keluar dari usus besar menggunakan dua garis miring:

$('#test\\:abc')

Pendeknya

$(document.getElementById("test:abc")) adalah apa yang harus Anda gunakan.

Penjelasan : Selain dari kenaikan kecepatan (lihat lebih jauh ke bawah), lebih mudah untuk ditangani.

Contoh: Katakan Anda memiliki fungsi

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

Kecepatan / waktu

lihat jsbin ini yang menguji dan membandingkan kecepatan metode pemilihan ID dengan titik dua

Anda perlu membuka konsol pembakar Anda untuk mendapatkan hasilnya.

Saya mengujinya dengan firefox 10 dan jquery 1.7.2

pada dasarnya saya melakukan pilih 10'000 kali div dengan titik dua di id - dengan metode yang berbeda untuk mencapainya. Kemudian saya membandingkan hasil dengan pemilihan ID tanpa titik dua di dalamnya, hasilnya cukup mengejutkan.

Waktu tersisa dalam metode pemilih kanan ms

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

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

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


71 $("#nocolon")

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

terutama

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

datang sedikit sebagai kejutan

Jelas tersandung pada titik dua, karena jQuery mencoba menafsirkannya sebagai pemilih. Coba gunakan pemilih atribut id.

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

Saya hanya akan menggunakan document.getElementById, dan meneruskan hasilnya ke jQuery()fungsi.

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

gunakan dua backslash \\

DEMO

seperti yang tertulis di sini

Jika Anda ingin menggunakan salah satu meta-karakter (seperti! "# $% & '() * +,. / :; <=>? @ [] ^` {|} ~) Sebagai bagian literal dari nama, Anda harus keluar dari karakter dengan dua garis miring terbalik: \. Misalnya, jika Anda memiliki elemen dengan id = "foo.bar", Anda dapat menggunakan pemilih $ ("# foo \ .bar"). Spesifikasi W3C CSS berisi lengkap

Referensi

Mengacu pada jawaban Toskan, saya memperbarui kodenya untuk membuatnya sedikit lebih mudah dibaca dan kemudian output ke halaman.

Inilah tautan jbin: http://jsbin.com/ujajuf/14/edit .



Juga, saya menjalankannya dengan lebih banyak iterasi

Iterations:1000000

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

Bahkan Lebih:

Iterations:10000000

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

coba gunakan $('#test\\:abc')

Sintaks ini $('[id="test:abc"]') bekerja untuk saya. Saya menggunakan Netbeans 6.5.1& menghasilkan komponen dengan idyang berisi a : (colon). Saya mencoba \\& amp; \3Atetapi tidak satupun dari mereka bekerja.

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