Pertanyaan Memilih elemen berdasarkan atribut data


Apakah ada metode yang mudah dan sederhana untuk memilih elemen berdasarkan pada mereka data atribut? Misalnya, pilih semua jangkar yang memiliki atribut data bernama customerID yang memiliki nilai 22.

Saya agak ragu untuk menggunakannya rel atau atribut lain untuk menyimpan informasi semacam itu, tetapi saya merasa jauh lebih sulit untuk memilih elemen berdasarkan data apa yang disimpan di dalamnya.


832
2018-03-21 16:13


asal


Jawaban:


$('*[data-customerID="22"]');

Anda harus bisa menghilangkan *, tetapi jika saya ingat dengan benar, tergantung pada versi jQuery yang Anda gunakan, ini mungkin memberikan hasil yang salah.

Perhatikan bahwa untuk kompatibilitas dengan Selectors API (document.querySelector{,all}), tanda kutip di sekitar nilai atribut (22) tidak dapat dihilangkan dalam kasus ini.

Juga, jika Anda bekerja dengan atribut data banyak di skrip jQuery Anda, Anda mungkin ingin mempertimbangkan menggunakan Plugin atribut data khusus HTML5. Ini memungkinkan Anda menulis kode yang lebih mudah dibaca dengan menggunakan .dataAttr('foo'), dan menghasilkan ukuran file yang lebih kecil setelah minification (dibandingkan dengan menggunakan .attr('data-foo')).


1227
2018-03-21 16:14



Bagi orang yang Googling dan ingin lebih banyak aturan umum tentang memilih dengan atribut data:

$("[data-test]") akan memilih elemen apa saja punya atribut data (tidak peduli nilai atribut). Termasuk:

<div data-test=value>attributes with values</div>
<div data-test>attributes without values</div>

$('[data-test~="foo"]') akan memilih elemen mana saja yang memiliki atribut data mengandung  foo tetapi tidak harus tepat, seperti:

<div data-test="foo">Exact Matches</div>
<div data-test="this has the word foo">Where the Attribute merely contains "foo"</div>

$('[data-test="the_exact_value"]') akan memilih elemen mana nilai atribut data yang tepat the_exact_value, sebagai contoh:

<div data-test="the_exact_value">Exact Matches</div>

tapi tidak

<div data-test="the_exact_value foo">This won't match</div>

234
2018-03-07 20:03



Menggunakan $('[data-whatever="myvalue"]') akan memilih apa pun dengan atribut html, tetapi di jQueries yang lebih baru tampaknya jika Anda menggunakan $(...).data(...) untuk melampirkan data, ia menggunakan beberapa browser ajaib dan tidak mempengaruhi html, oleh karena itu tidak ditemukan oleh .find seperti yang ditunjukkan di jawaban sebelumnya.

Verifikasi (diuji dengan 1.7.2+) (juga lihat biola): (diperbarui agar lebih lengkap)

var $container = $('<div><div id="item1"/><div id="item2"/></div>');

// add html attribute
var $item1 = $('#item1').attr('data-generated', true);

// add as data
var $item2 = $('#item2').data('generated', true);

// create item, add data attribute via jquery
var $item3 = $('<div />', {id: 'item3', data: { generated: 'true' }, text: 'Item 3' });
$container.append($item3);

// create item, "manually" add data attribute
var $item4 = $('<div id="item4" data-generated="true">Item 4</div>');
$container.append($item4);

// only returns $item1 and $item4
var $result = $container.find('[data-generated="true"]');

119
2017-07-26 15:57



Untuk memilih semua jangkar dengan atribut data data-customerID==22, Anda harus menyertakan a untuk membatasi ruang lingkup pencarian hanya untuk tipe elemen itu. Melakukan pencarian atribut data dalam lingkaran besar atau pada frekuensi tinggi ketika ada banyak elemen di halaman dapat menyebabkan masalah kinerja.

$('a[data-customerID="22"]');

57
2017-09-23 16:53



Saya belum melihat jawaban JavaScript tanpa jQuery. Semoga itu membantu seseorang.

var elements = document.querySelectorAll('[data-customerID="22"]');

elements[0].innerHTML = 'it worked!';
<a data-customerID='22'>test</a>

Info:


41
2017-12-29 14:44



melalui metode Jquery filter ():

http://jsfiddle.net/9n4e1agn/1/

HTML:

<button   data-id='1'>One</button>
<button   data-id='2'>Two</button>

JavaScript:

$(function() {    
    $('button').filter(function(){
        return $(this).data("id")   == 2}).css({background:'red'});  
     });

11
2017-07-08 23:26



Konstruksi seperti ini: $('[data-XXX=111]') tidak berfungsi Safari 8.0.

Jika Anda menetapkan atribut data dengan cara ini: $('div').data('XXX', 111), ini hanya berfungsi jika Anda menetapkan atribut data secara langsung di DOM seperti ini: $('div').attr('data-XXX', 111).

Saya pikir itu karena tim jQuery mengoptimalkan garbage collector untuk mencegah kebocoran memori dan operasi berat pada pembangunan kembali DOM pada setiap perubahan atribut data.


9
2017-10-27 09:13



Agar ini berfungsi di Chrome, nilainya harus tidak memiliki sepasang tanda kutip lainnya.

Ini hanya berfungsi, misalnya, seperti ini:

$('a[data-customerID=22]');

8
2017-12-28 15:48



Contoh JS Asli

Dapatkan NodeList elemen

var elem = document.querySelectorAll('[data-id="container"]')

html: <div data-id="container"></div>

Dapatkan elemen pertama 

var firstElem = document.querySelectorAll('[id="container"]')[0]

html: <div id="container"></div>

Targetkan kumpulan node yang mengembalikan nodelist

document.getElementById('footer').querySelectorAll('[data-id]')

html:

<div class="footer">
    <div data-id="12"></div>
    <div data-id="22"></div>
</div>

Dapatkan elemen berdasarkan beberapa nilai data (OR)

document.querySelectorAll('[data-section="12"],[data-selection="20"]')

html:

<div data-selection="20"></div>
<div data-section="12"></div>

Dapatkan elemen berdasarkan gabungan nilai data (DAN)

document.querySelectorAll('[data-prop1="12"][data-prop2="20"]')

html:

<div data-prop1="12" data-prop2="20"></div>

Dapatkan item tempat nilai dimulai

document.querySelectorAll('[href^="https://"]')

8
2017-11-15 07:53



Kadang-kadang diinginkan untuk memfilter elemen berdasarkan apakah mereka memiliki item data yang dilampirkan pada mereka secara terprogram (alias tidak melalui atribut dom):

$el.filter(function(i, x) { return $(x).data('foo-bar'); }).doSomething();

Pekerjaan di atas tetapi tidak dapat dibaca. Pendekatan yang lebih baik adalah menggunakan pseudo-selector untuk menguji hal semacam ini:

$.expr[":"].hasData = $.expr.createPseudo(function (arg) {
    return function (domEl) {
        var $el = $(domEl);
        return $el.is("[" + ((arg.startsWith("data-") ? "" : "data-") + arg) + "]") || typeof ($el.data(arg)) !== "undefined";
    };
});

Sekarang kita dapat merombak pernyataan asli menjadi sesuatu yang lebih lancar dan mudah dibaca:

$el.filter(":hasData('foo-bar')").doSomething();

3
2017-12-09 13:01