jQuery가 중복 ID가 있는 첫 번째 요소만 선택하는 이유는 무엇입니까?

잘못된 HTML: 동일한 ID를 가진 여러 요소

문제 설명:

주어진 HTML 구조에는 동일한 ID "xyz"를 가진 세 개의 버튼이 있습니다. 그러나 onClick 이벤트를 처리하기 위해 jQuery ID 선택기 $("#xyz")를 사용하면 첫 번째 버튼만 응답합니다. 다른 버튼은 무시됩니다.

분석:

jQuery ID 선택기는 문서에서 일치하는 ID를 가진 첫 번째 요소를 선택하도록 설계되었습니다. 그러나 W3C 사양에 따르면 ID 값은 문서 내에서 고유해야 합니다. 동일한 ID를 가진 여러 요소가 있는 것은 유효하지 않은 HTML로 간주됩니다.

jQuery API 문서에서 언급한 것처럼, 두 개 이상의 요소가 동일한 ID를 갖는 경우 jQuery 선택기는 일치하는 첫 번째 요소만 선택합니다. 이 동작에 의존하는 것은 권장되지 않으며 ID의 고유성을 보장하기 위해 HTML을 수정해야 합니다.

해결책:

이 문제를 해결하려면 id 속성을 다음으로 바꾸세요. 버튼의 클래스 속성. 이렇게 하면 HTML 유효성 검사 규칙을 위반하지 않고 버튼이 다른 값을 가질 수 있습니다.

수정된 HTML:

<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 스크립트:

xyz 클래스를 사용하여 모든 버튼에 대한 클릭 이벤트를 처리하려면 다음 jQuery를 사용하세요. 코드:

$(".xyz").click(function(){
    // Get the value of the button that was clicked
    var xyz = this.value;

    // Display the value in an alert box
    alert(xyz);
});

이 업데이트된 코드는 세 개의 버튼 모두에 대한 onClick 이벤트를 적절하게 처리하고 해당 값을 경고 상자에 표시합니다.

위 내용은 jQuery가 중복 ID가 있는 첫 번째 요소만 선택하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!