objek penapis jQuery dengan nilai atribut data

Artikel ini menerangkan cara menggunakan jQuery untuk menapis elemen berdasarkan nilai atribut data. Coretan kod berikut memilih semua elemen div dengan ID bermula dengan "proto_" dan data atribut data "keadaan" adalah "terbuka":

var $el = $('div[id^=proto_]').filter(function() {
    return ($(this).data("state") == "open");
});
console.log($el);

jSfiddle demo

Versi yang dioptimumkan

Terima kasih kepada VLAD untuk penyelesaian pengoptimuman:

var $el = $('div[id^=proto_]').filter('div[data-state=open]').css('color','red');

Demo versi yang dioptimumkan JSFiddle

FAQ untuk objek penapisan jQuery oleh atribut data

Bagaimana menggunakan jQuery untuk menapis objek berdasarkan atribut data?

JQuery menyediakan cara yang kuat untuk memanipulasi dan menapis objek berdasarkan atribut data. Ini boleh dicapai menggunakan fungsi

jQuery. Fungsi .filter() membolehkan menentukan fungsi sebagai parameternya, yang harus kembali benar atau palsu. Jika fungsi kembali benar, elemen akan dimasukkan ke dalam koleksi yang ditapis; Berikut adalah contoh asas: .filter()

$('div').filter(function() {
  return $(this).data('key') === 'value';
});

Contoh ini menapis semua elemen div dengan nilai "kunci" untuk atribut data.

Apakah perbezaan antara

dan

dalam .filter()? .find()

dan .filter() kedua -dua kaedah jQuery yang digunakan untuk menyempitkan skop carian elemen dalam objek jQuery. Perbezaan utama mereka ialah: .find() menyempitkan set elemen yang sepadan dengan unsur -unsur yang sepadan atau lulus ujian fungsi, manakala .filter() mendapat keturunan setiap elemen dalam pengumpulan elemen yang sepadan semasa dan melepasi pemilih, objek jQuery atau unsur ke penapis. .find()

Bolehkah saya menggunakan pelbagai atribut data dalam fungsi

? .filter()

Ya. Hanya tambah lebih banyak syarat untuk fungsi tersebut. Contohnya:

Contoh ini menapis semua elemen div dengan nilai "key1" atribut data "nilai1" dan nilai "key2" atribut data "nilai2".

$('div').filter(function() {
  return $(this).data('key1') === 'value1' && $(this).data('key2') === 'value2';
});

Bagaimana untuk menapis elemen berdasarkan nilai atribut data yang mengandungi rentetan tertentu?

anda boleh menggunakan atribut yang mengandungi pemilih

untuk memilih elemen yang nilai atributnya mengandungi rentetan tertentu. Contohnya:

[name*="value"] Contoh ini menapis semua nilai "kunci" atribut data yang mengandungi elemen div dengan nilai "nilai".

$('div[data-key*="value"]').filter(function() {
  // 您的代码
});

boleh

digunakan dengan kaedah jQuery yang lain?

Ya. Sebagai contoh, anda boleh menggunakan .filter() dengan

untuk menukar gaya elemen penapis:

.filter() .css() Contoh ini mengubah warna teks semua elemen div dengan nilai "kunci" nilai "kepada merah.

Atas ialah kandungan terperinci objek penapis jQuery dengan nilai atribut data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!