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

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")방법이나 이와 유사한 방법으로 사용할 수있는 단일 페이지 응용 프로그램에 적합합니다 .

답변

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

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>

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