jQuery를 사용하여 동일한 ID를 가진 요소에 액세스

HTML에서 각 요소는 고유한 ID를 가져야 합니다. 그러나 동일한 ID를 가진 여러 요소에 jQuery 함수를 적용해야 하는 시나리오가 있을 수 있습니다. 이 기사에서는 이러한 상황을 처리하는 방법을 살펴보겠습니다.

제공된 코드 조각에 따르면 jQuery의 jcarousel() 함수는 ID가 "carousel"인 첫 번째 요소에만 적용됩니다. 동일한 ID를 가진 여러 요소가 있는 경우 jQuery는 다른 항목을 무시하고 첫 번째 항목만 선택합니다.

공통 클래스를 사용한 솔루션

권장되는 접근 방식은 다음을 할당하는 것입니다. 여러 요소에 동일한 ID를 사용하는 대신 요소에 대한 공통 클래스를 사용합니다. 이렇게 하면 jQuery가 수정해야 하는 모든 요소를 ​​쉽게 식별할 수 있습니다. 다음은 "carousel"이라는 공통 클래스를 사용하는 예입니다:

jQuery(document).ready(function() {
    jQuery('.carousel').jcarousel();
});

동일 ID를 사용하는 대체 솔루션

ID 속성을 변경할 수 없는 경우 다음 해결 방법을 사용할 수 있습니다.

jQuery(document).ready(function() {
    jQuery('[id=carousel]').jcarousel();
});

이 접근 방식은 jQuery의 속성 선택기 [attribute=value]를 사용하여 속성 ID가 "carousel"로 설정된 모든 요소를 ​​선택합니다. 여러 요소에 동일한 ID를 사용하는 것은 권장되지 않으며 가능하면 피해야 합니다.