프로그래밍 언어/HTML,CSS,JS

HTML5를 사용하는 사용자 정의 데이터 속성에 대한 jQuery 선택자

Rateye 2021. 8. 12. 10:25
728x90
반응형
질문 : HTML5를 사용하는 사용자 정의 데이터 속성에 대한 jQuery 선택기

HTML5와 함께 제공되는 이러한 데이터 속성에 사용할 수있는 선택기를 알고 싶습니다.

이 HTML 부분을 예로 들어 보겠습니다.

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

얻을 선택자가 있습니까?

  • "Companies" 아래에 data-company="Microsoft" 모든 요소
  • "Companies" 아래에 data-company!="Microsoft" 모든 요소
  • 다른 경우에는 "포함, 미만, 초과 등 ..."과 같은 다른 선택기를 사용할 수 있습니다.
답변

$("ul[data-group='Companies'] li[data-company='Microsoft']") //Get all elements with data-company="Microsoft" below "Companies"

$("ul[data-group='Companies'] li:not([data-company='Microsoft'])") //get all elements with data-company!="Microsoft" below "Companies"

jQuery 선택자 살펴보기 : contains는 선택자입니다.

여기에 대한 정보가 있습니다 : contains 선택기

출처 : https://stackoverflow.com/questions/4146502/jquery-selectors-on-custom-data-attributes-using-html5
728x90
반응형