pemilih jQuery pada atribut data khusus menggunakan HTML5

Saya ingin tahu penyeleksi apa yang tersedia untuk atribut data ini yang datang dengan HTML5.

Mengambil bagian HTML ini sebagai contoh:

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

Apakah ada penyeleksi untuk mendapatkan:

• Semua elemen dengan di data-company="Microsoft"bawah ini"Companies"
• Semua elemen dengan di data-company!="Microsoft"bawah ini"Companies"
• Dalam kasus lain apakah mungkin menggunakan penyeleksi lain seperti "berisi, kurang dari, lebih besar dari, dll ...".

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

Lihat di jQuery Selectors : berisi adalah pemilih

di sini adalah info tentang : berisi pemilih

jQuery UImemiliki :data()pemilih yang juga bisa digunakan. Tampaknya sudah ada sejak Versi 1.7.0 .

Anda bisa menggunakannya seperti ini:

Dapatkan semua elemen dengan data-companyatribut

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

Dapatkan semua elemen yang data-companysetaraMicrosoft

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

Dapatkan semua elemen yang data-companytidak setaraMicrosoft

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

dll ...

Satu peringatan dari :data()pemilih baru adalah bahwa Anda harus menetapkan datanilai dengan kode untuk dipilih. Ini berarti bahwa untuk bekerja di atas, mendefinisikan datadalam HTML tidak cukup. Anda harus terlebih dahulu melakukan ini:

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

Ini bagus untuk aplikasi satu halaman di mana Anda cenderung menggunakan $(...).data("datakey", "value")cara ini atau yang serupa.

jsFiddle Demo

jQuery menyediakan beberapa penyeleksi (daftar lengkap) untuk membuat kueri yang Anda cari berfungsi. Untuk menjawab pertanyaan Anda "Dalam kasus lain apakah mungkin menggunakan penyeleksi lain seperti" berisi, kurang dari, lebih besar dari, dll ... "." Anda juga dapat menggunakan berisi, dimulai dengan, dan diakhiri dengan untuk melihat atribut data html5 ini. Lihat daftar lengkap di atas untuk melihat semua opsi Anda.

The query dasar telah tercakup di atas, dan menggunakan John Hartsock 's jawaban akan menjadi taruhan terbaik baik untuk mendapatkan setiap elemen data-perusahaan, atau untuk mendapatkan setiap satu kecuali Microsoft (atau versi lain dari :not).

Untuk memperluas ini ke poin lain yang Anda cari, kami dapat menggunakan beberapa pemilih meta. Pertama, jika Anda akan melakukan lebih dari satu query, ada baiknya cache pilihan induk.

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

Selanjutnya, kita bisa mencari perusahaan di set ini yang mulai dengan G

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

Atau mungkin perusahaan yang mengandung kata lunak

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

Dimungkinkan juga untuk mendapatkan elemen yang kecocokan akhir atribut datanya

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>

Solusi JS murni / vanila (contoh kerja di sini )

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

Di kueriSelektorSemua Anda harus menggunakan pemilih CSS yang valid (saat ini Level3 )

SPEED TEST (2018.06.29) untuk jQuery dan Pure JS: test dilakukan pada MacOs High Sierra 10.13.3 di Chrome 67.0.3396.99 (64-bit), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64 -sedikit). Tangkapan layar di bawah ini menunjukkan hasil untuk peramban tercepat (Safari):

PureJS lebih cepat dari jQuery sekitar 12% di Chrome, 21% di Firefox dan 25% di Safari. Menariknya kecepatan untuk Chrome adalah operasi 18,9M per detik, Firefox 26M, Safari 160.9M (!).

Jadi pemenangnya adalah PureJS dan browser tercepat adalah Safari (lebih dari 8x lebih cepat dari Chrome!)

Di sini Anda dapat melakukan pengujian pada mesin Anda: https://jsperf.com/js-selectors-x