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

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

이 HTML을 예로 들어 보자.

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

선택할 수있는 선택기가 있습니까?

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

$("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 선택기 에 대한 정보가 있습니다 .

jQuery UI사용할 수 있는 :data()선택기 가 있습니다. 그것은 버전 1.7.0 이후로 보인다.

다음과 같이 사용할 수 있습니다.

data-company속성 이있는 모든 요소 가져 오기

var companyElements = $("ul:data(group) li:data(company)");

data-company동등한 모든 요소를 ​​가져 옵니다Microsoft

var microsoft = $("ul:data(group) li:data(company)")
                    .filter(function () {
                        return $(this).data("company") == "Microsoft";
                    });

data-company같지 않은 모든 요소를 ​​가져 옵니다.Microsoft

var notMicrosoft = $("ul:data(group) li:data(company)")
                       .filter(function () {
                           return $(this).data("company") != "Microsoft";
                       });

기타...

새로운 :data()선택기 의 한 가지주의 할 점은 data값 을 선택 하려면 값 을 코드 로 설정해야한다는 것 입니다. 이것은 위의 작업 data이 HTML에서 정의하는 것만으로는 충분하지 않다는 것을 의미합니다 . 먼저 다음을 수행해야합니다.

$("li").first().data("company", "Microsoft");

이 $(...).data("datakey", "value")방법이나 이와 유사한 방법으로 사용할 수있는 단일 페이지 응용 프로그램에 적합합니다 .

jsFiddle Demo

jQuery는 원하는 쿼리를 수행 할 수 있도록 여러 선택기 (전체 목록) 를 제공합니다. 귀하의 질문을 해결하기 위해 ...보다 적은,보다 큰 포함 등, "다른 경우에는은과 같은 다른 선택기를 사용하는 것이 가능하다" "." 이러한 html5 데이터 속성을 확인하기 위해 포함, 시작 및 끝을 사용할 수도 있습니다. 모든 옵션을 보려면 위의 전체 목록을 참조하십시오.

기본적인 쿼리는 위에서 다루었 고 John Hartsock 의 대답을 사용 하는 것이 모든 데이터 회사 요소를 얻거나 Microsoft (또는 다른 버전의 :not)를 제외한 모든 데이터 요소를 얻는 것이 가장 좋습니다 .

원하는 다른 지점으로 이것을 확장하기 위해 여러 메타 선택기를 사용할 수 있습니다. 첫째, 여러 쿼리를 수행하려는 경우 부모 선택을 캐시하는 것이 좋습니다.

var group = $('ul[data-group="Companies"]');

다음으로이 세트에서 G로 시작하는 회사를 찾을 수 있습니다.

var google = $('[data-company^="G"]',group);//google

또는 소프트라는 단어가 포함 된 회사

var microsoft = $('[data-company*="soft"]',group);//microsoft

데이터 속성의 끝이 일치하는 요소를 가져올 수도 있습니다.

var facebook = $('[data-company$="book"]',group);//facebook

//stored selector
var group = $('ul[data-group="Companies"]');

//data-company starts with G
var google = $('[data-company^="G"]',group).css('color','green');

//data-company contains soft
var microsoft = $('[data-company*="soft"]',group).css('color','blue');

//data-company ends with book
var facebook = $('[data-company$="book"]',group).css('color','pink');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul data-group="Companies">
  <li data-company="Microsoft">Microsoft</li>
  <li data-company="Google">Google</li>
  <li data-company ="Facebook">Facebook</li>
</ul>

순수 / 바닐라 JS 솔루션 ( 여기서 작업 예 )

// All elements with data-company="Microsoft" below "Companies"
let a = document.querySelectorAll("[data-group='Companies'] [data-company='Microsoft']"); 

// All elements with data-company!="Microsoft" below "Companies"
let b = document.querySelectorAll("[data-group='Companies'] :not([data-company='Microsoft'])"); 

에서 querySelectorAll 당신은 유효한 사용해야합니다 CSS 선택기 (현재 LEVEL3를 )

jQuery 및 Pure JS에 대한 속도 테스트 (2018.06.29) : Chrome 67.0.3396.99 (64 비트), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64)의 MacOs High Sierra 10.13.3에서 테스트가 수행되었습니다. -비트). 아래 스크린 샷은 가장 빠른 브라우저 (Safari)에 대한 결과를 보여줍니다.

PureJS는 jQuery보다 Chrome에서 약 12 ​​%, Firefox에서 21 %, Safari에서 25 % 빠릅니다. 흥미롭게도 Chrome의 속도는 초당 18.9M, Firefox 26M, Safari 160.9M (!)이었습니다.

따라서 우승자는 PureJS 이고 가장 빠른 브라우저는 Safari입니다 (Chrome보다 8 배 이상 빠름).

다음은 컴퓨터에서 테스트를 수행 할 수 있습니다 : https://jsperf.com/js-selectors-x