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에 콜론을 사용하여 div를 10 만 번 선택했습니다. 그런 다음 콜론이없는 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")를 사용할 수 있습니다. W3C CSS 사양 완전한 포함

참고

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]').