Xử lý dấu hai chấm trong ID phần tử với jQuery

Chúng tôi không thể truy cập phần tử div bằng ID "test: abc" trong mã JS bằng jQuery.

<div id="test:abc">

$('#test:abc') 

Nó hoạt động tốt mà không có ruột già. Chúng tôi không có quyền kiểm soát việc tạo ID vì nó được tạo tự động trong các biểu mẫu con Trinidad vì nó gắn ID mẫu phụ với :mọi thành phần bên trong nó.

Bạn cần thoát khỏi dấu hai chấm bằng hai dấu gạch chéo ngược:

$('#test\\:abc')

Nói ngắn gọn

$(document.getElementById("test:abc")) là những gì bạn nên sử dụng.

Giải thích : Ngoài việc tăng tốc độ (xem thêm xuống), việc xử lý sẽ dễ dàng hơn.

Ví dụ: Giả sử bạn có chức năng

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

Tốc độ / thời gian

hãy xem jsbin này để kiểm tra và so sánh tốc độ của các phương pháp lựa chọn ID với dấu hai chấm

bạn cần phải mở bảng điều khiển firebird của bạn để có kết quả.

Tôi đã thử nó với firefox 10 và jquery 1.7.2

về cơ bản, tôi đã chọn 10.000 lần div với dấu hai chấm trong id - với các phương thức khác nhau để đạt được nó. Sau đó, tôi so sánh kết quả với lựa chọn ID không có dấu hai chấm trong đó, kết quả khá đáng ngạc nhiên.

thời gian bên trái trong ms phương pháp chọn phải

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

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

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


71 $("#nocolon")

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

đặc biệt

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

đến một chút bất ngờ

Rõ ràng, nó vấp phải dấu hai chấm, bởi vì jQuery đang cố gắng diễn giải nó như một công cụ chọn. Hãy thử sử dụng bộ chọn thuộc tính id.

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

Tôi sẽ chỉ sử dụng document.getElementById, và chuyển kết quả cho jQuery()hàm.

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

sử dụng hai dấu gạch chéo ngược \\

BẢN GIỚI THIỆU

như được viết ở đây

Nếu bạn muốn sử dụng bất kỳ ký tự meta nào (chẳng hạn như! "# $% & '() * + ,. /:; <=>? @ [] ^` {|} ~) Như một phần nghĩa đen của a tên, bạn phải thoát ký tự có hai dấu gạch chéo ngược: \. Ví dụ: nếu bạn có một phần tử với id = "foo.bar", bạn có thể sử dụng bộ chọn $ ("# foo \ .bar"). Đặc tả CSS của W3C chứa đầy đủ

Tài liệu tham khảo

Đề cập đến câu trả lời của Toskan, tôi đã cập nhật mã của anh ấy để làm cho nó dễ đọc hơn một chút và sau đó xuất ra trang.

Đây là liên kết jbin: http://jsbin.com/ujajuf/14/edit .



Ngoài ra, tôi chạy nó với nhiều lần lặp hơn

Iterations:1000000

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

Hơn nữa:

Iterations:10000000

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

thử sử dụng $('#test\\:abc')

Cú pháp này $('[id="test:abc"]') làm việc cho tôi. Tôi đang sử dụng Netbeans 6.5.1và nó tạo ra các thành phần có idchứa một : (colon). Tôi đã thử \\& \3Anhưng không ai trong số họ làm việc.

Sử dụng $('[id=id:with:colon]').