jQuery를 사용하여 data-id 속성에 액세스

jQuery Quicksand 플러그인으로 작업할 때 클릭한 요소의 'data-id' 속성을 검색해야 하는 경우가 많습니다. 다양한 웹 서비스에 정보를 전달합니다. 이 속성 값을 효과적으로 얻는 방법은 다음과 같습니다.

'data-id' 속성은 jQuery의 .attr() 메서드를 사용하여 액세스할 수 있습니다. 구문은 다음과 같습니다.

$(this).attr("data-id")

이 표현식은 'data-id' 속성의 값을 문자열로 반환합니다.

예를 들어 클릭한 요소에 다음 HTML이 있는 경우:

다음 jQuery 코드는 'data-id' 속성을 검색합니다:

$("#list li").on('click', function() {
  // Get the data-id value
  var dataId = $(this).attr("data-id");
  // Use the dataId value as needed
});

또는 jQuery 버전 1.4.3 이상에서는 .data() 메서드를 사용할 수 있습니다. .data() 메서드는 'data-id' 값을 문자열이 아닌 기본 JavaScript 유형(예: 숫자, 부울)으로 반환합니다.

$(this).data("id")

.data() 메서드를 사용할 때 'data-' 뒤의 부분은 소문자여야 한다는 점을 기억하세요. 예를 들어 'data-idNum'은 실패하고 'data-idnum'은 성공합니다.