ID 값이 같은 요소가 여러 개일 때 jQuery는 어떻게 작동합니까?
이 웹사이트는 한 의 구글 의 애드워드 를 있습니다.id.
다음 3개의 질의가 왜 같은 답변(2)으로 이루어지지 않는지 설명해주시겠습니까?
HTML:
<div>
<span id="a">1</span>
<span id="a">2</span>
<span>3</span>
</div>
JS:
$(function() {
var w = $("div");
console.log($("#a").length); // 1 - Why?
console.log($("body #a").length); // 2
console.log($("#a", w).length); // 2
});
동일한 ID를 가진 2개의 요소를 가지는 것은 W3C 사양에 따라 유효한 html이 아닙니다.
경우 CSS 에 ID ()인 jQuery 는합니다를 합니다.document.getElementByIdmethod -당 ID가 첫 합니다.
두 에서 jQuery 는 Sizzle Selector (querySelectorAll사용 두 요소를 모두 선택하는 즉, ) .결과는 브라우저별로 다를 수 있습니다.
그러나 동일한 ID를 가진 두 요소를 같은 페이지에 가져서는 안됩니다.CSS에 필요하면 클래스를 사용하세요.
반드시 중복 ID로 선택해야 하는 경우 속성 선택기를 사용합니다.
$('[id="a"]');
fiddle을 보세요: http://jsfiddle.net/P2j3f/2/
참고: 가능한 경우 다음과 같이 유형 선택기로 해당 선택기의 자격을 부여해야 합니다.
$('span[id="a"]');
그 이유는 유형 선택기가 속성 선택기보다 훨씬 효율적이기 때문입니다.유형 선택기로 속성 선택기의 수식을 지정하면 jQuery는 먼저 유형 선택기를 사용하여 해당 유형의 요소를 찾은 다음 해당 요소에서만 속성 선택기를 실행합니다.이것은 단순히 훨씬 더 효율적입니다.
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이기 때문에 시간이 지나도 동일하게 유지된다는 보장은 없습니다. 셀렉터가 jQuery다처럼 #a면,용을 document.getElementById("a")가 그 및 . .querySelectorAll()존재한다, jQuery는 종종 그 브라우저에 특정한 구현을 가지는 내장된 브라우저 기능에 셀렉터를 전달할 것입니다. 만일querySelectorAll()존재하지 않습니다. 그러면 Sizzle Selector 엔진을 사용하여 자체적으로 구현할 Selector를 수동으로 찾습니다.따라서 정확한 선택기와 브라우저의 새 버전에 따라 최소 3개 이상의 다른 구현을 동일한 브라우저 제품군에 포함시킬 수 있습니다.그러면, 각각의 브라우저들은 모두 그들만의 것을 가지게 될 것입니다.querySelectorAll()실행. 이한 대로 해야 할 입니다.이 상황에 안정적으로 대처하려면 위에서 설명한 대로 자신의 반복 코드를 사용해야 할 것입니다.
jQuery'sidselector는 오직 하나의 결과만을 반환합니다.descendant그리고.multiple두번째와 세번째 문장의 선택기는 여러 요소를 선택하도록 설계됩니다.다음과 유사합니다.
진술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;
...두 가지 결과도 얻을 수 있습니다.
ID가 같은 두 개 이상의 요소를 가진 바보 페이지가 있을 때 필요한 요소를 얻기 위해 우리는 무엇을 합니까?'#duplicatedId'를 사용하면 첫 번째 요소만 얻을 수 있습니다.다른 요소를 선택하려면 다음과 같은 작업을 수행할 수 있습니다.
$("[id=duplicatedId]")
id= duplicatedId로 구성된 모든 요소가 포함된 컬렉션이 제공됩니다.
각 ID 값은 문서 내에서 한 번만 사용해야 합니다.둘 이상의 요소에 동일한 ID가 할당된 경우 해당 ID를 사용하는 쿼리는 DOM에서 처음 일치하는 요소만 선택합니다.동일한 ID를 사용하는 두 개 이상의 요소를 가진 문서는 올바르지 않습니다.
장난꾸러기 구글.하지만 그들은 문을 닫지도 않습니다.<html>그리고.<body>꼬리표 소리가 나요.문제는 미샤의 두번째와 세번째 쿼리도 1이 아닌 2를 반환하는 이유입니다.
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");
개별품목접근
<div id='a' data-options='{"url","www.google.com"}'>Google</div>
<div id='a' data-options='{"url","www.facebook.com"}'>Facebook</div>
<div id='a' data-options='{"url","www.twitter.com"}'>Twitter</div>
$( "div[id='a']" ).on('click', function() {
$(location).attr('href', $(this).data('options').url);
});
간단하게 $('span#a')를 쓸 수 있습니다.길이를 구할 수 있는 길이를 구합니다.
코드에 대한 솔루션은 다음과 같습니다.
console.log($('span#a').length);
JSfiddle: https://jsfiddle.net/vickyfor2007/wcc0ab5g/2/ 을 사용해 보십시오.
언급URL : https://stackoverflow.com/questions/8498579/how-does-jquery-work-when-there-are-multiple-elements-with-the-same-id-value
'programing' 카테고리의 다른 글
| 도커 Ubuntu 이미지 내에 패키지를 설치할 수 없습니다. (0) | 2023.09.25 |
|---|---|
| Typescript 컴파일 중 상대 가져오기 문에 .js 확장자 추가(ES6 모듈) (0) | 2023.09.25 |
| 오라클 데이터베이스의 SID, 서비스 이름 및 포트를 가져오는 방법은 무엇입니까? (0) | 2023.09.25 |
| setWebViewClient와 setWebChrom Client의 차이점은 무엇입니까? (0) | 2023.09.25 |
| USING 인덱스 절 (0) | 2023.09.25 |