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

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

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

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

속도/타이밍

콜론으로 ID의 선택 방법을 테스트하고 비교하는 이 jsbin을 살펴봅니다.

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

파이어폭스 10과 jquery 1.7.2로 테스트했습니다.

기본적으로 저는 ID에 콜론이 있는 디브를 10,000번 선택했습니다 - 그것을 달성하기 위한 다양한 방법으로.그리고 대장이 없는 신분증 선택과 결과를 비교했더니, 결과가 상당히 놀랍습니다.

왼쪽 시간(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]').

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