Bagaimanakah Anda Boleh Menggunakan jQuery untuk Mencari Elemen HTML Berdasarkan Nilai Atribut Data?

Mencari Elemen mengikut Nilai Atribut Data dalam jQuery

Dalam HTML, atribut data digunakan untuk menyimpan maklumat yang boleh digunakan oleh JavaScript dan CSS. Untuk mengakses elemen berdasarkan nilai atribut data mereka, jQuery menyediakan beberapa pilihan.

Pemilih Sama Atribut

Pendekatan yang paling mudah ialah menggunakan Pemilih Atribut Sama:

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

Pemilih ini memadankan elemen dengan atribut data tertentu dan nilai tertentu. Dalam kes ini, ia akan memilih elemen dengan data-slide="0" dan menambah kelas aktif padanya.

Menggunakan Kaedah .find()

Pendekatan alternatif ialah menggunakan kaedah .find() untuk mencari unsur keturunan dalam unsur yang dipadankan:

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

Walau bagaimanapun, kaedah ini mencari keturunan, bukan unsur induk. Ia tidak akan berfungsi dalam senario ini kerana elemen sasaran ialah induk kepada elemen yang kami cari.

Memahami Kaedah .find()

The .find () kaedah direka untuk melintasi pepohon DOM ke bawah, mencari elemen keturunan yang sepadan dengan pemilih yang ditentukan. Ia tidak mencari elemen induk.

<!-- HTML Code -->
<div class="container">
  <p>Paragraph 1</p>
  <div class="nested-container">
    <p>Nested Paragraph</p>
  </div>
</div>

<!-- jQuery Code -->
$('.container').find('p').text('Hello World');

Dalam contoh ini, .find('p') akan mencari semua

unsur yang merupakan anak .bekas. Ia tidak akan sepadan dengan

elemen di dalam bekas bersarang kerana ia bukan anak langsung .bekas.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Menggunakan jQuery untuk Mencari Elemen HTML Berdasarkan Nilai Atribut Data?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!