การจัดการลำไส้ใหญ่ในองค์ประกอบ ID ด้วย jQuery

เราไม่สามารถเข้าถึงองค์ประกอบ div ด้วย ID "test: abc" ในรหัส JS โดยใช้ jQuery

<div id="test:abc">

$('#test:abc') 

มันทำงานได้ดีโดยไม่มีลำไส้ใหญ่ เราไม่สามารถควบคุมการสร้าง ID ได้เนื่องจากมันถูกสร้างขึ้นโดยอัตโนมัติในรูปแบบย่อยของตรินิแดดเพราะมันจะแนบ ID แบบฟอร์มย่อยกับ:ทุกองค์ประกอบที่อยู่ภายใน

คุณต้องหลบหนีลำไส้ใหญ่โดยใช้แบ็กสแลชสองอัน:

$('#test\\:abc')

ในระยะสั้น

$(document.getElementById("test:abc")) คือสิ่งที่คุณควรใช้

คำอธิบาย : นอกเหนือจากการเพิ่มความเร็ว (ดูเพิ่มเติมลง) มันง่ายต่อการจัดการ

ตัวอย่าง: สมมติว่าคุณมีฟังก์ชั่น

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

ความเร็ว / เวลา

ดูที่jsbinนี้ซึ่งทดสอบและเปรียบเทียบความเร็วของวิธีการเลือกของ ID กับโคลอน

คุณต้องเปิดคอนโซล firebug เพื่อรับผลลัพธ์

ฉันทดสอบกับ firefox 10 และ jQuery 1.7.2

โดยพื้นฐานแล้วฉันได้เลือก 10'000 เท่าของ div ด้วยเครื่องหมายโคลอนใน id - ด้วยวิธีการต่าง ๆ เพื่อให้บรรลุ จากนั้นฉันเปรียบเทียบผลลัพธ์กับการเลือก ID โดยไม่มีเครื่องหมายจุดคู่อยู่ผลลัพธ์น่าแปลกใจมาก

เวลาที่เหลือในวิธีการเลือก ms ที่เหมาะสม

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

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

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


71 $("#nocolon")

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

โดยเฉพาะอย่างยิ่ง

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

แปลกใจนิดหน่อย

มันสะดุดบนลำไส้ใหญ่เพราะ jQuery พยายามตีความมันเป็นตัวเลือก ลองใช้ตัวเลือกแอตทริบิวต์ id

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

ฉันจะใช้document.getElementByIdและส่งผลลัพธ์ไปยังjQuery()ฟังก์ชัน

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

ใช้แบ็กสแลชสองอัน \\

การสาธิต

ตามที่เขียนไว้ที่นี่

หากคุณต้องการใช้เมตาอักขระใด ๆ (เช่น! "# $% & '() * +,. / :; <=>? @ [] ^` {|} ~) เป็นส่วนหนึ่งของตัวอักษร ชื่อคุณต้องหลีกเลี่ยงอักขระที่มีแบ็กสแลชสองตัว: \ ตัวอย่างเช่นหากคุณมีองค์ประกอบที่มี id = "foo.bar" คุณสามารถใช้ตัวเลือก $ ("# foo \ .bar") ข้อมูลจำเพาะ CSS ของ W3C มีความสมบูรณ์

การอ้างอิง

อ้างอิงถึงคำตอบของ Toskan ฉันอัปเดตรหัสของเขาเพื่อให้อ่านได้ง่ายขึ้นเล็กน้อยจากนั้นส่งออกไปยังหน้า

นี่คือการเชื่อมโยง jbin นี้: http://jsbin.com/ujajuf/14/edit



นอกจากนี้ฉันวิ่งไปพร้อมกับวนซ้ำมากขึ้น

Iterations:1000000

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

มากไปกว่านั้น:

Iterations:10000000

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

ลองใช้ $('#test\\:abc')

ไวยากรณ์นี้ใช้$('[id="test:abc"]') งานได้สำหรับฉัน ฉันใช้Netbeans 6.5.1และสร้างส่วนประกอบที่มีที่มีid : (colon)ฉันลอง\\& & \3Aแต่ไม่มีใครทำงาน

$('[id=id:with:colon]')ใช้