다른 범위의 여러 Id 선택기?

Question

Id 요소는 전체 문서에서 고유하므로 괜찮습니다. 방법이

$("#Genders", $("#tableFor_SEARCH")).buttonset(); 

및

$("#Genders", $("#tableFor_CREATE")).buttonset(); 

파이어 폭스이 함께 좋아 보인다 대해,이 사용은 모든 브라우저 및 단점 허용 할 수 있습니까?

참고 : ID가 문서 전체에 걸쳐 고유해야하기 때문에 JQuery와 ID를 선택하고 라디오 & 체크 박스 도우미 을 (espcially 태그 라벨)와 함께 작동하기 때문에 나는이 사용을 시도

Answer 1

는 여러 ID를 사용할 수의이 선택에, 그 문제가되지 않습니다. 범위로 지정하지 않아도됩니다.

$("#tableFor_SEARCH #Genders").buttonset(); 

페이지의 id가 충돌하는 것은 문제가됩니다. 동일한 id가 두 번 이상 발생하면 일부 브라우저는 그 중 하나를 무시할 수 있습니다. 현재의 모든 브라우저에서 작동하더라도 여전히 표준을 위반하고 있으며 모든 브라우저 업데이트 작업을 중단 할 수 있습니다.

셀렉터에 두 개의 id가있는 것이 유용 할 수 있습니다. 예를 들어 여러 페이지에 대해 동일한 스크립트를 사용하고있는 경우 id를 사용하여 페이지에 어떤 기능이 있는지 지정할 수 있습니다.

Answer 2

최선의 선택은 다음과 같습니다

$("#Genders").buttonset(); 

Answer 3

브라우저가 정상적으로 작동하지만 문서가 유효하지 않다는 사실은 변경되지 않습니다. 이러한 행동을 통해 페이지를 구성하지 마십시오. 당신은 그들이 미래 버전에서 그것을 깨기로 선택할 수도 있다는 것을 결코 알지 못합니다.

"식별자"가 같은 요소가 여러 개있을 경우 ID 대신 클래스를 사용하는 것이 좋습니다. JQuery와는 셀렉터 사용하기 매우 다르지 않다 :

$(".Genders", "#tableFor_SEARCH").buttonset(); // Or $("#tableFor_SEARCH .Genders") 
$(".Genders", "#tableFor_CREATE").buttonset(); // Or $("#tableFor_CREATE .Genders") 

Answer 4

사례를 처리하기 위해 ID를 복제 할 필요가 없습니다. 클래스 선택기를 사용하여 컨텍스트가있는 요소를 선택할 수 있습니다. 어느 것이 여러면에서 훨씬 더 깨끗합니다. 당신이 ID를 중복되지해야하는 이유, 아래

//will select element with class .Genders inside #tableFor_SEARCH 
$(".Genders", "#tableFor_SEARCH").buttonset(); 

//will select element with class .Genders inside #tableFor_CREATE 
$(".Genders", "#tableFor_CREATE").buttonset(); 

를 참조하십시오?

ID 속성은 고유해야하며 이는 표준입니다. http://www.w3.org/TR/html401/struct/global.html#h-7.5.2. ID 속성의 목적은 페이지에서 요소를 고유하게 식별하는 것입니다. 이 목적은 복제 할 때 무효화됩니다.

다음은

1. 그것은 표준 아니라, 당신이 ID를 중복되지해야하는 이유 이유의 목록입니다. http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
2. 깨졌습니다. http://jsfiddle.net/8H2Da/1/ [컨텍스트 유무에 관계없이 첫 번째 일치하는 요소 만 가져옵니다.]
3. 컨텍스트를 사용하여 중복 ID가있는 요소에 액세스하는 속도가 느립니다. 사실 ID 선택기는 모든 선택기 중에서 가장 빠릅니다.http://jsperf.com/jquery-id-selector-with-context/2
4. URL에서 두 번째 중복 ID 요소를 태그 할 수 없습니다. http://fiddle.jshell.net/s27hQ/show/light/#Goto3 [URL의 마지막 부분 #Goto3에주의하십시오]
5. 로컬 링크 <a href="#dupId">Go to That element</a>을 생성하여 두 번째 중복 ID 요소로 이동할 수 없습니다. http://jsfiddle.net/s27hQ/

어떻게 jQuery에서 작동합니까?

$('#Genders')은 단순히 document.getElementById('Genders')을 호출하고 jQuery 객체로 래핑합니다.

당신이 $("#Genders", $("#tableFor_SEARCH"))을 할 때, 단순히 getElementById을 사용할 수 없습니다, 내부적으로 jQuery를이 ID #Genders와 일치하는 요소를 찾기 위해 #tableFor_SEARCH 내부의 모든 요소를 ​​반복하는 것입니다.

왜 브라우저가 불평하지 않습니까? HTML 스탠드 지점에서

는 ID 속성은 http://fiddle.jshell.net/s27hQ/show/light/#Goto3

브라우저가 URL에서 해당 섹션에 로컬 페이지 링크 http://jsfiddle.net/s27hQ/를 사용하여 요소에 같은 탐색 사용하거나 탐색 할 수있는 페이지의 요소에 태그를 사용 유연하고 용서할 수있는 개발자들과 함께, 심지어 조잡한 HTML 코드는 대부분의 데스크탑 브라우저에서 아름답게 렌더링 될 것입니다. 똑같은 방식으로, ID를 복제하는 것에 대해 진정으로 불평하지는 않지만 또한 실제로 작동하지 않습니다. 위의 항목 # 4 및 # 5.

자바 스크립트 입장에서 볼 때 ID 요소는 document.getElementById을 사용하여 액세스 할 수 있습니다.이 클래스는 페이지에서 고유 한 요소에 가장 오래된 브라우저 중 가장 빠른 속도로 가장 빠르게 액세스 할 수 있습니다. 중복 ID로 두 번째 요소에 액세스하는 방법은 분명하지 않습니다.

그래서 사용하지 마십시오.

향후 개발자에게 더 쉽고 유지하기 쉬운 코드로 만드십시오.

Answer 5

당신은 참조하십시오

$("#Genders", $("#tableFor_SEARCH")) 

이 같은 것을 할 것입니다 :

$("#tableFor_SEARCH").find("#Genders") 

은 그래서 #Gender에 대한 document.getElementById()를 사용하지 않습니다,하지만 #tableFor_SEARCH RESP합니다.

$(".Genders", $("#tableFor_SEARCH")) 

또는 다른 ID를

$("#Genders_SEARCH") 
$("#Genders_CREATE") 

당신이 고유 ID를 가지고 네이티브 메소드의 속도가 당신으로

Answer 6

을에서 getElementById이이 방법 : #tableFor_CREATE

난 당신이 중 하나의 클래스를 사용하는 것이 좋습니다 방금 ID가 문서에 따라 고유하다고 했으므로 동일한 ID를 가진 여러 구성 요소를 사용하면 문제가 발생하므로 가장 좋은 대답은 m을 사용하는 것입니다. OST 특정 ID 다음과 같은 :

$("#tableFor_SEARCH").buttonset(); 
$("#tableFor_CREATE").buttonset(); 

PS : 내 생각은 "#tableFor_SEARCH" 아래에 (또는 포함) "#Genders" 것입니다.