jQuery menemukan elemen dengan nilai atribut data

103

Saya memiliki beberapa elemen seperti di bawah ini:

<a class="slide-link" href="#" data-slide="0">1</a>
<a class="slide-link" href="#" data-slide="1">2</a>
<a class="slide-link" href="#" data-slide="2">3</a>

Bagaimana cara menambahkan kelas ke elemen yang memiliki data-slidenilai atribut 0(nol)?

Saya telah mencoba banyak solusi berbeda tetapi tidak ada yang berhasil. Sebuah contoh:

$('.slide-link').find('[data-slide="0"]').addClass('active');

Ada ide?

— MrUpsidown
sumber

2

Untuk menjelaskan sedikit di sini, alasan mengapa ini tidak berhasil adalah karena Anda mencoba menemukan turunan dari .slide-linkdengan atribut [data-slide="0"]. Karena sesuatu tidak bisa menjadi keturunannya sendiri, tidak ada yang bisa dikembalikan. Namun, jika Anda memiliki pembungkus di sekitar tautan ini, maka ini akan berhasil:$('.slide-link-wrapper').find('[data-slide="0"]').addClass('active');

— DondeEstaMiCulo

Lihat juga stackoverflow.com/q/4191386/292060

— goodeye

225

Gunakan Attribute Equals Selector

$('.slide-link[data-slide="0"]').addClass('active');

Fiddle Demo

.Temukan()

itu bekerja di bawah pohon

Dapatkan turunan dari setiap elemen dalam kumpulan elemen yang cocok saat ini, difilter oleh selektor, objek jQuery, atau elemen.

— Tushar Gupta - curioustushar
sumber

2

Salahku. Saya telah mencobanya tetapi di tempat yang salah (sebelum menambahkan elemen saya secara dinamis ...). Pokoknya terima kasih atas usahanya! Bekerja dengan baik.

— MrUpsidown

@MrUpsidown Selamat datang Senang membantu :)

— Tushar Gupta - curioustushar

1

Wow! solusi ini bagus! Punya masalah selama berjam-jam tetapi ini memperbaikinya!

bagaimana cara menyamakannya dengan nilai variabel var slidernumber = "0";, bukan konstanta "0"?

— tony gil

Jika karena alasan tertentu Anda tidak dapat bergantung pada kelas tertentu yang ada di sana maka Anda dapat menggunakan wildcard untuk bagian pertama seperti ini $ ('* [data-slide = "0"]'). AddClass ('active') ;

— SeanMC

59

Anda juga bisa menggunakan .filter ()

$('.slide-link').filter('[data-slide="0"]').addClass('active');

— Anton
sumber

5

Saya mencari solusi yang sama dengan variabel, bukan String.
Saya harap saya dapat membantu seseorang dengan solusi saya :)

var numb = "3";
$(`#myid[data-tab-id=${numb}]`);

— Aleshanee
sumber

3

Anda juga dapat menggunakan andSelf()metode untuk mendapatkan pembungkus DOM berisi kemudian find()dapat digunakan sebagai ide Anda

$(function() {
  $('.slide-link').andSelf().find('[data-slide="0"]').addClass('active');
})

.active {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="slide-link" href="#" data-slide="0">1</a>
<a class="slide-link" href="#" data-slide="1">2</a>
<a class="slide-link" href="#" data-slide="2">3</a>

Luaskan cuplikan

— Girish
sumber