Bộ chọn jQuery trên thuộc tính dữ liệu tùy chỉnh sử dụng HTML5

Question

Tôi muốn biết bộ chọn nào có sẵn cho các thuộc tính dữ liệu này đi kèm với HTML5.

Lấy mảnh HTML này là một ví dụ:

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

Có selectors để có được:

• Tất cả các yếu tố với data-company="Microsoft" dưới "Companies"
• Tất cả các yếu tố với data-company!="Microsoft" dưới "Companies"
• Trong các trường hợp khác là có thể sử dụng các bộ chọn khác như "chứa, ít hơn hơn, lớn hơn, v.v. ".

Answer 1

$("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" 

Look in để jQuery Selectors: chứa là một selector

đây là thông tin về các :contains selector

Answer 2

jQuery UI có :data() selector mà cũng có thể được sử dụng. Nó đã được khoảng từ Version 1.7.0 có vẻ như.

Bạn có thể sử dụng nó như thế này:

Nhận tất cả các yếu tố với một thuộc tính data-company

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

Nhận tất cả các yếu tố mà data-company bằng Microsoft

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

Nhận tất cả các yếu tố mà data-company không bằng Microsoft

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

vv ...

Một caveat của :data() chọn mới là bạn phải thiết lập các giá trị datatheo mã cho nó được chọn. Điều này có nghĩa là để làm việc ở trên, việc xác định data trong HTML là không đủ. Trước tiên, bạn phải làm điều này:

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

Điều này là tốt cho các ứng dụng trang duy nhất mà bạn có khả năng sử dụng $(...).data("datakey", "value") trong này hoặc tương tự cách.

Answer 3

jsFiddle Demo

jQuery cung cấp một số selectors (full list) để thực hiện các truy vấn bạn đang tìm kiếm công việc. Để giải quyết câu hỏi của bạn "Trong các trường hợp khác, bạn có thể sử dụng các bộ chọn khác như" chứa, nhỏ hơn, lớn hơn, v.v ... "." bạn cũng có thể sử dụng chứa, bắt đầu bằng và kết thúc bằng để xem các thuộc tính dữ liệu html5 này. Xem danh sách đầy đủ ở trên để xem tất cả các tùy chọn của bạn. John Hartsock 's answer sẽ là sự lựa chọn tốt nhất hoặc là có được mọi phần tử dữ liệu công ty, hoặc để có được mọi người ngoại trừ Microsoft (hoặc bất kỳ phiên bản khác của :not).

để mở rộng này đến điểm khác mà bạn đang tìm kiếm, chúng tôi có thể sử dụng một số bộ chọn meta. Trước tiên, nếu bạn định thực hiện nhiều truy vấn, thì tốt nhất là hãy chọn bộ nhớ cache cha mẹ,

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

Tiếp theo, chúng ta có thể tìm kiếm các công ty trong tập này người bắt đầu với G

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

Hoặc có lẽ các công ty mà chứa từ mềm

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

Nó cũng có thể để có được các yếu tố có dữ liệu của thuộc tính kết thúc trận đấu

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>