jQuery를 사용하여 요소 ID에서 콜론 처리

jQuery를 사용하여 요소 ID에서 콜론 처리

---

jQuery를 사용하여 JS 코드에서 ID가 "test : abc"인 div 요소에 액세스 할 수 없습니다.

<div id="test:abc">

$('#test:abc') 

콜론없이 잘 작동합니다. 트리니다드 하위 양식에서 자동 생성되므로 ID 생성을 제어 할 수 없습니다. 하위 양식 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); 

속도 / 타이밍

콜론과 ID의 선택 방법 속도를 테스트하고 비교하는 이 jsbin을 살펴보십시오.

결과를 얻으려면 Firebug 콘솔을 열어야합니다.

firefox 10 및 jquery 1.7.2로 테스트했습니다.

기본적으로 나는 id에 콜론으로 10 만 번의 div를 선택했습니다. 그런 다음 콜론이없는 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') 

---

두 개의 백 슬래시를 사용하십시오 \\

데모

여기에 쓰여진

If you wish to use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, you must escape the character with two backslashes: \. For example, if you have an element with id="foo.bar", you can use the selector $("#foo\.bar"). The W3C CSS specification contains the complete

Reference

---

Referring to Toskan's answer, I updated his code to make it a bit more readable and then output to the page.

Here's the jbin link: http://jsbin.com/ujajuf/14/edit.



Also, I ran it with more iterations

Iterations:1000000

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

Even More:

Iterations:10000000

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

---

try using $('#test\\:abc')

---

This syntax $('[id="test:abc"]') worked for me. I'm using Netbeans 6.5.1 & it generates components with an id that contains a : (colon). I tried the \\ & the \3A but none of them worked.

---

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

참고URL : https://stackoverflow.com/questions/5552462/handling-colon-in-element-id-with-jquery