pemilih jQuery pada atribut data khusus menggunakan HTML5


636

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 ...".

4
Jika Anda melihat di sini, Anda akan menemukan semua yang Anda butuhkan api.jquery.com/category/selector :-)
Allan Kimmer Jensen

Jawaban:


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


akankah ini berhasil? $('div[data-col="1"][data-row="2"]') Apakah ini akan memilih div mana data-col sama dengan 1 dan baris data sama dengan 2, atau akankah itu memilih salah satunya?
LuudJacobs

10
Apakah ini akan berfungsi jika data ditetapkan melalui .data ('sesuatu', nilai)? Seringkali ini tidak membuat atribut aktual saat melampirkan nilai. Saya tahu OP cukup spesifik mengenai atribut, tetapi saya pikir saya akan meningkatkan kesadaran kalau-kalau ada masalah dengan pemilih ini.
AaronLS

15
@ AaronLS Tidak itu tidak (setidaknya tidak dengan versi jQuery misalnya 1.4.4) - Anda perlu mengatur data menggunakan .attr('data-something', 'value')untuk melihat pembaruan dalam HTML. Sesuai stackoverflow.com/questions/6827810/…
Matty J

Apakah tidak ada cara untuk mendapatkan nilai atribut data tanpa mengetik datapanggilan?
ahnbizcad

@gwho$('#element').data('something')
Gaui

69

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.


Saya tidak mendapatkan peringatan Anda. Ini berfungsi baik untuk saya, dan saya tidak membuat referensi lain ke data di js. $ ('# id'). text ($ ('# mydatasource'). data ('kosong')); Ini akan mengisi elemen #id dengan isi dari tag data-kosong pada elemen #mydatasource.
Bersantai Di Siprus

4
@FacebookAnswers Apakah Anda menggunakan :data()pemilih, atau .data()metode?
rhughes

Saya mengerti apa yang kamu maksud. Saya menggunakan metode, sedangkan peringatan Anda merujuk pada metode.
Bersantai Di Siprus

7
^ maksud Anda peringatannya disebut pemilih.
ahnbizcad

1
Aneh, sekarang tampaknya bekerja di biola dengan Jquery 3.3.1: jsfiddle.net/kai_noack/q6nzLs20/1
Kai Noack

39

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>


6

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):

masukkan deskripsi gambar di sini

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.