jQuery를 사용하여 데이터 속성 값을 기반으로 요소에 클래스를 추가하는 방법은 무엇입니까?

jQuery: 데이터 속성 값으로 요소 찾기

HTML 마크업에서 요소는 data-*를 사용하여 할당된 사용자 정의 데이터 속성을 가질 수 있습니다. 속성 구문. 이러한 속성은 일반적으로 JavaScript 코드로 액세스하거나 조작할 수 있는 추가 정보를 저장하는 데 사용됩니다.

일반적인 사용 사례 중 하나는 데이터 속성 값을 기반으로 요소에 특정 클래스를 추가하는 것입니다. 예를 들어 다음 HTML 요소를 고려해 보세요.

<a class="slide-link" href="#" data-slide="0">1</a><br><a class="slide-link" href="#" data-slide="1">2</a><br><a class="slide-link" href="#" slide="2">3</a><br>

우리의 목표는 데이터 슬라이드 속성 값이 0(영)인 요소에 "활성" 클래스를 추가하는 것입니다. ).

속성 같음 선택기

jQuery는 특정 속성의 정확한 값을 기반으로 요소를 선택할 수 있는 속성 같음 선택기를 제공합니다. 목표를 달성하기 위해 다음 코드를 사용할 수 있습니다:

$('.slide-link[data-slide="0"]').addClass('active');<br>

이 코드는 "slide-link" 클래스와 data-slide 속성이 "0"인 요소를 선택합니다. 그런 다음 "active" 클래스를 추가합니다.

.find() 이해

초기 시도에서 사용된 .find() 메서드가 작동합니다. DOM 트리를 탐색하여 그러나 이 경우에는 하위 요소가 아닌 데이터 속성을 기반으로 요소를 선택하려고 합니다. 따라서 이 작업에는 속성 같음 선택기를 사용하는 것이 더 적합합니다.

위 내용은 jQuery를 사용하여 데이터 속성 값을 기반으로 요소에 클래스를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!