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?


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

Jawaban:


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.


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');

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}]`);

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>

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.