[jquery] 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')
