jQuery 커스텀 데이터 셀렉터

HTML5에서는 해당 요소에 사용자가 임의로 지정한 속성값을 활용할 수 있습니다. 이를 커스텀 데이터 속성(custom data attributes) 이라고 부릅니다.
data-* 를 앞에 붙여서 속성명을 지정하고 값을 부여하면 됩니다.

<ul>
  <li data-company="Microsoft">Microsoft</li>
  <li data-company="Google">Google</li>
  <li data-company="Facebook">Facebook</li>
</ul>

자바스크립트에서 커스텀 데이터 접근하기

dataset 객체를 통해 data 속성 값을 가져오기 위해서는 속성 이름의 data-뒷 부분을 사용합니다.

var elements = document.querySelectorAll('ul > li');

elements.forEach(function(elem) {
  console.log(elem.dataset.company);
});

jQuery에서 접근하기

jQuery에서는 data() 함수를 이용하면 data 속성 값을 출력하거나, data 속성의 값을 지정할 수 있습니다.

// 데이터 읽기
$('li').data('company');

// 데이터 저장
$('li').data('company', 'Apple');

data 속성을 지우기 위해서는 removeData 이용하여 제거할 수 있습니다.

// 데이터 삭제
$('li').removeData('company');

가끔, 데이터 함수가 적용이 안되면 attr 을 이용하여 동일하게 처리할 수 있습니다.

// 데이터 읽기
$('li').attr('data-company');

// 데이터 저장
$('li').attr('data-company', 'Apple');

 

jQuery 데이터 셀렉터

// 데이터 속성이 G로 시작하는 요소
var google = $('[data-company^="G"]').css('color','green');

// 데이터 속성에 soft 단어가 포함하는 요소
var microsoft = $('[data-company*="soft"]').css('color','blue');

// 데이터 속성 끝이 book과 일치하는 요소
var facebook = $('[data-company$="book"]').css('color','pink');