Bộ chọn jQuery trên các thuộc tính dữ liệu tùy chỉnh bằng HTML5

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

Lấy đoạn HTML này làm ví dụ:

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

Có bộ chọn để nhận:

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

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

Nhìn vào jQuery Selector : chứa là một bộ chọn

đây là thông tin về : chứa bộ chọn

jQuery UIcó một :data()bộ chọn cũng có thể được sử dụng. Có vẻ như nó đã xuất hiện từ phiên bản 1.7.0 .

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 data-companythuộc tính

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

Lấy tất cả các phần tử data-companybằngMicrosoft

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ố data-companykhông bằng nhauMicrosoft

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

Vân vân...

Một lưu ý của :data()bộ chọn mới là bạn phải đặt datagiá trị theo mã cho nó được chọn. Điều này có nghĩa là để những điều trên hoạt động, việc xác định datatrong 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 tốt cho các ứng dụng trang đơn nơi bạn có khả năng sử dụng $(...).data("datakey", "value")theo cách này hoặc tương tự.

jsFiddle Demo

jQuery cung cấp một số bộ chọn (danh sách đầy đủ) để thực hiện các truy vấn bạn đang tìm kiếm. Để giải quyết câu hỏi của bạn "Trong các trường hợp khác, có thể sử dụng các công cụ 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 và kết thúc bằng cách xem xét 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.

Truy vấn cơ bản đã được trình bày ở trên và sử dụng câu trả lời của John Hartsock sẽ là lựa chọn tốt nhất để có được mọi yếu tố của công ty dữ liệu hoặc để có được mọi yếu tố ngoại trừ Microsoft (hoặc bất kỳ phiên bản nào khác ).:not

Để mở rộng điểm này đến các đ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. Đầu tiên, nếu bạn định thực hiện nhiều truy vấn, thật tuyệt khi lưu trữ lựa chọn cha.

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

Tiếp theo, chúng ta có thể tìm kiếm các công ty trong bộ này bắt đầu bằng G

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

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

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

Cũng có thể lấy các phần tử có kết thúc khớp thuộc tính dữ liệ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>

Giải pháp Pure / vanilla JS (ví dụ làm việc ở đây )

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

Trong querySelector ALL, bạn phải sử dụng bộ chọn CSS hợp lệ (hiện tại là Level3 )

KIỂM TRA TỐC ĐỘ (2018,06,29) cho jQuery và Pure JS: thử nghiệm đã được thực hiện trên MacOs High Sierra 10.13.3 trên Chrome 67.0.3394.99 (64-bit), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64 -bit). Dưới ảnh chụp màn hình hiển thị kết quả cho trình duyệt nhanh nhất (Safari):

PureJS nhanh hơn jQuery khoảng 12% trên Chrome, 21% trên Firefox và 25% trên Safari. Tốc độ thú vị cho Chrome là 18,9M hoạt động mỗi giây, Firefox 26M, Safari 160,9M (!).

Vì vậy, người chiến thắng là PureJS và trình duyệt nhanh nhất là Safari (nhanh hơn gấp 8 lần so với Chrome!)

Tại đây bạn có thể thực hiện kiểm tra trên máy của mình: https://jsperf.com/js-selector-x