[JQUERY] 어떻게 jQuery를 작업은 동일한 ID 값을 가진 여러 요소가있을 때입니까?

어떻게 jQuery를 작업은 동일한 ID 값을 가진 여러 요소가있을 때입니까?

해결법

1. ---

   1.동일한 ID 2 개 요소를 갖는 것은 W3C 규격에 따라 유효한 HTML 아니다.

   동일한 ID 2 개 요소를 갖는 것은 W3C 규격에 따라 유효한 HTML 아니다.

   당신의 CSS 선택기 만 ID 선택을 가지고 (특정 컨텍스트에 사용되지 않는) 경우, jQuery를 해당 ID로 첫 번째 요소를 반환 네이티브 document.getElementById를 방법을 사용합니다.

   그러나, 다른 두 경우에 jQuery를는 지글 지글 선택기 엔진에 의존하는 (또는 querySelectorAll 가능한 경우) 명백하게 두 요소를 선택한다. 결과는 당 브라우저별로 다를 수 있습니다.

   그러나, 당신은 동일한 ID와 같은 페이지에 두 개의 요소가해서는 안됩니다. 당신이 당신의 CSS를 위해 필요한 경우, 대신 클래스를 사용합니다.

   당신이 절대적으로 중복 ID로 선택해야하는 경우, 속성 선택기를 사용합니다 :

   $('[id="a"]');
   

   바이올린을 살펴보십시오 : http://jsfiddle.net/P2j3f/2/

   참고 :이 같은 태그 선택과 그 선택을 규정해야 가능한 경우 :

   $('span[id="a"]');
   

2. ---

   2.단지 지정된 ID를 가진 하나 개의 요소가 있어야합니다. 당신이 그 상황에 붙어 경우, 옵션에 대한 내 대답 하반기를 참조하십시오.

   단지 지정된 ID를 가진 하나 개의 요소가 있어야합니다. 당신이 그 상황에 붙어 경우, 옵션에 대한 내 대답 하반기를 참조하십시오.

   당신이 사양으로 정의되지 않은 동일한 ID (불법 HTML)와 여러 요소가있을 때 브라우저가 작동하는 방법. 당신은 모든 브라우저를 테스트하고 그들이 어떻게 행동하는지 알아,하지만이 구성을 사용하거나 특정 동작에 의존하는 현명 할 수있다.

   여러 객체가 같은 식별자를 갖고 싶어 클래스를 사용합니다.

   <div>
       <span class="a">1</span>
       <span class="a">2</span>
       <span>3</span>
   </div>
   
   $(function() {
       var w = $("div");
       console.log($(".a").length);            // 2
       console.log($("body .a").length);       // 2
       console.log($(".a", w).length);         // 2
   });
   

   당신이 안정적으로 문서를 해결할 수 없기 때문에 동일하다 ID를 가진 요소를보고 싶을 경우에는 DOM 기능 내장의에 의존 할 수 없기 때문에, 당신은 당신의 자신의 반복을해야 할 것입니다.

   이 같은 할 수 :

   function findMultiID(id) {
       var results = [];
       var children = $("div").get(0).children;
       for (var i = 0; i < children.length; i++) {
           if (children[i].id == id) {
               results.push(children[i]);
           }
       }
       return(results);
   }
   

   또는, jQuery를 사용하여 :

   $("div *").filter(function() {return(this.id == "a");});
   

   jQuery를 작업 예 : http://jsfiddle.net/jfriend00/XY2tX/.

   서로 다른 결과를 얻을 이유에 관해서는, 그 실제 선택 작업을 수행 한 코드의 어떤 부분의 내부 구현해야 할 것입니다. jQuery를, 당신은 어떤 주어진 버전은 무엇을하고 있었는지 알아 내기 위해 코드를 공부할 수 있지만,이 불법 HTML이기 때문에,이 같은 이상 시간을 머물 것이라는 보장은 없습니다. 선택기 그냥 document.getElementById를 사용 #A 같은 만일 그렇다면 간단한 ID가, ( "A") 인 경우 내가 jQuery를에 본 적이 무엇부터 먼저 확인합니다. 선택기 ()가 존재하는 및 querySelectorAll보다 더 복잡하다면, jQuery를 종종 해당 브라우저에 구현 고유있을 것이다 브라우저 기능 내장에 떨어져 선택기를 전달합니다. querySelectorAll ()가 존재하지 않는 경우 수동으로 자신의 구현을해야합니다 선택기를 찾으려면 다음은 지글 지글 선택기 엔진을 사용합니다. 그래서, 당신은 정확한 선택하는 방법과 새로운 브라우저가에 따라 동일한 브라우저 가족 적어도 세 가지 구현 모두를 가질 수 있습니다. 그런 다음, 각 브라우저는 모두 자신의 querySelectorAll () 구현을해야합니다. 당신이 안정적으로이 상황에 대처하려는 경우, 당신은 아마 제가 위에서 설명했듯이 자신의 반복 코드를 사용해야합니다.

3. ---

   3.jQuery를 아이디 선택은 하나 개의 결과를 반환합니다. 자손과 두 번째 및 세 번째 문장에서 여러 선택기는 복수의 요소를 선택하도록 설계된다. 그것은 비슷 :

   jQuery를 아이디 선택은 하나 개의 결과를 반환합니다. 자손과 두 번째 및 세 번째 문장에서 여러 선택기는 복수의 요소를 선택하도록 설계된다. 그것은 비슷 :

   문 1

   var length = document.getElementById('a').length;
   

   ... 하나 개의 결과를 얻을 수 있습니다.

   문 2

   var length = 0;
   for (i=0; i<document.body.childNodes.length; i++) {
       if (document.body.childNodes.item(i).id == 'a') {
           length++;
       }
   }
   

   ... 두 결과를 얻을 수 있습니다.

   문 3

   var length = document.getElementById('a').length + document.getElementsByTagName('div').length;
   

   또한 2 개 ... 결과를 산출한다.

4. ---

   4.아이디 선택기 jQuery를 페이지에서 :

   아이디 선택기 jQuery를 페이지에서 :

   각 id 값은 문서 내에서 한 번만 사용할 수 있어야합니다. 두 개 이상의 요소가 동일한 ID를 할당 된 경우, 쿼리는 사용하는 ID 만 DOM의 첫 번째 일치하는 요소를 선택할 것이다있다. 이 동작은 그러나,에 의존해서는 안; 동일한 ID를 사용하여 하나 개 이상의 원소를 가진 문서는 무효이다.

   장난 꾸러기 구글. 그러나 그들은 심지어 가까운 자신의 및 태그 내가 듣는다. 미샤의 2 층과 3 쿼리가 2가 아닌 1도를 반환 이유를 질문은, 비록입니다.

5. ---

   5.당신은 그 여러 요소 및 액세스에 동일한 ID 또는 이름이 같은 단지 할당 같은 클래스와 여러 요소들을 인덱스 및 당신의 필수 작업을 수행있는 경우.

   당신은 그 여러 요소 및 액세스에 동일한 ID 또는 이름이 같은 단지 할당 같은 클래스와 여러 요소들을 인덱스 및 당신의 필수 작업을 수행있는 경우.

     <div>
           <span id="a" class="demo">1</span>
           <span id="a" class="demo">2</span>
           <span>3</span>
       </div>
   

   JQ :

   $($(".demo")[0]).val("First span");
   $($(".demo")[1]).val("Second span");
   

6. ---

   6.모두가 "각 id 값은 문서 내에서 한 번만 사용할 수 있어야합니다"라고, 그러나 우리는 우리가 같은 ID를 가진 두 개 이상의 요소가 바보 같은 페이지가있을 때 우리가 필요로하는 요소를 얻기 위해 무엇을. 우리가 JQuery와 '#duplicatedId'선택기를 사용하는 경우, 우리는 첫 번째 요소 만 얻을. 다른 요소를 선택 달성하기 위해 당신은 이런 식으로 뭔가를 할 수

   모두가 "각 id 값은 문서 내에서 한 번만 사용할 수 있어야합니다"라고, 그러나 우리는 우리가 같은 ID를 가진 두 개 이상의 요소가 바보 같은 페이지가있을 때 우리가 필요로하는 요소를 얻기 위해 무엇을. 우리가 JQuery와 '#duplicatedId'선택기를 사용하는 경우, 우리는 첫 번째 요소 만 얻을. 다른 요소를 선택 달성하기 위해 당신은 이런 식으로 뭔가를 할 수

   $ ( "[ID = duplicatedId]")

   당신은 ID = duplicatedId 모든 요소 컬렉션을 얻을 것이다

7. ---

   7.당신은 단순히 $ ( '스팬 # a를') 쓸 수 있습니다. 길이 길이를 얻을 수 있습니다.

   당신은 단순히 $ ( '스팬 # a를') 쓸 수 있습니다. 길이 길이를 얻을 수 있습니다.

   여기에 귀하의 코드에 대한 해결 방법은 다음과 같습니다

   console.log($('span#a').length);
   

   JSfiddle을 시도하십시오 https://jsfiddle.net/vickyfor2007/wcc0ab5g/2/

from https://stackoverflow.com/questions/8498579/how-does-jquery-work-when-there-are-multiple-elements-with-the-same-id-value by cc-by-sa and MIT license