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

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는 선택자입니다.

여기에 대한 정보가 있습니다 : 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

또는 soft라는 단어를 포함하는 회사

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'])"); 

In querySelectorAll you must use valid CSS selector (currently Level3)

SPEED TEST (2018.06.29) for jQuery and Pure JS: test was performed on MacOs High Sierra 10.13.3 on Chrome 67.0.3396.99 (64-bit), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64-bit). Below screenshot shows results for fastest browser (Safari):

PureJS was faster than jQuery about 12% on Chrome, 21% on Firefox and 25% on Safari. Interestingly speed for Chrome was 18.9M operation per second, Firefox 26M, Safari 160.9M (!).

So winner is PureJS and fastest browser is Safari (more than 8x faster than Chrome!)

Here you can perform test on your machine: https://jsperf.com/js-selectors-x

참고URL : https://stackoverflow.com/questions/4146502/jquery-selectors-on-custom-data-attributes-using-html5