여러 요소가 동일한 ID를 공유할 때 jQuery의 ID 선택기가 첫 번째 요소에서만 작동하는 이유는 무엇입니까?

동일한 ID가 여러 개인 경우 jQuery ID 선택기 동작

jQuery로 작업할 때 ID 선택기($(" #xyz"))는 첫 번째로 일치하는 요소에서만 값을 검색하는 것 같습니다. 이 동작은 특히 동일한 ID를 가진 모든 요소에 대해 작동할 것으로 예상할 때 혼란스럽고 실망스러울 수 있습니다.

동일한 ID를 가진 HTML 코드

다음을 고려하세요. 동일한 ID("xyz")를 세 개에 잘못 할당하는 HTML 코드 버튼:

<button>

jQuery 코드

다음 jQuery 코드를 사용하여 클릭한 버튼의 값을 검색할 수 있습니다.

$("#xyz").click(function() {
    var xyz = $(this).val();
    alert(xyz);
});

첫 번째 버튼에만 작동하는 이유

여기서 이 경우 jQuery 코드는 첫 번째 버튼에만 작동합니다. jQuery ID 선택기는 지정된 ID와 일치하는 첫 번째 요소를 선택하도록 설계되었습니다. ID "xyz"가 여러 번 반복되므로 첫 번째 것만 반환합니다.

HTML 무효성과 해결 방법

이 동작은 유효한 HTML을 보장하는 것의 중요성을 강조합니다. 암호. HTML 사양에 따르면 각 ID 값은 문서 내에서 고유해야 합니다. 동일한 ID를 가진 여러 요소를 갖는 것은 유효하지 않으므로 피해야 합니다.

문제를 해결하려면 ID를 각 버튼의 클래스 속성으로 바꾸세요.

<button type="button" class="btn btn-primary xyz" value="1">XYZ1</button>
<button type="button" class="btn btn-primary xyz" value="2">XYZ2</button>
<button type="button" class="btn btn-primary xyz" value="3">XYZ3</button>

업데이트된 jQuery 코드

업데이트된 HTML 코드를 사용하여 클릭한 버튼의 값을 검색하려면 클래스를 사용합니다. selector:

$(".xyz").click(function() {
    alert(this.value);
});

참고: 이 수정된 코드에서는 이미 기본 JavaScript 개체이므로 "this" 키워드를 $()로 래핑할 필요가 없습니다.

위 내용은 여러 요소가 동일한 ID를 공유할 때 jQuery의 ID 선택기가 첫 번째 요소에서만 작동하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!