jquery, pemilih untuk kelas dalam id

91

Di bawah ini, bagaimana saya harus memilih elemen yang berisi kelas my_classdalam elemen dengan id = "my_id"?

Perhatikan bahwa elemen tersebut mungkin juga memiliki kelas lain, yang tidak saya pilih.

<div id = "my_id">
    <span class = "my_class hidden">hi</span>
    <span class = "my_class">hello</span>
</div>

sedang mencoba

$("#my_id [class*=my_class ]")
jquery pengguna984003
sumber

Jawaban:

151

Anda dapat menggunakan pemilih kelas bersama dengan pemilih keturunan

$("#my_id .my_class")
Arun P Johny
sumber
Dapatkah saya menggabungkan ini dengan: first (untuk mendapatkan elemen pertama dari kelas itu di dalam #my_id)?
jakob.j
1
@ jakob.j$("#my_id .my_class:first")
Arun P Johny
Dapatkah saya menggunakan yang sama untuk kelas daripada id seperti $ (". My_class #my_id") ketika id didefinisikan di dalam kelas
dhS
48

Cukup gunakan pemilih kelas biasa.

$('#my_id .my_class')

Tidak masalah jika elemen tersebut juga memiliki kelas lain. Itu memiliki kelas .my_class , dan berada di dalam #my_id , jadi itu akan cocok dengan selektor itu.

Mengenai kinerja

Menurut dokumentasi kinerja pemilih jQuery , lebih cepat menggunakan dua penyeleksi secara terpisah, seperti ini:

$('#my_id').find('.my_class')

Inilah bagian yang relevan dari dokumentasi:

Pemilih Berbasis ID

// Fast:
$( "#container div.robotarm" );

// Super-fast:
$( "#container" ).find( "div.robotarm" );

The .find()Pendekatan lebih cepat karena seleksi pertama ditangani tanpa melalui mesin pemilih Sizzle - Pilihan ID-satunya ditangani menggunakan document.getElementById(), yang sangat cepat karena itu adalah asli browser.

Memilih berdasarkan ID atau kelas saja (antara lain) memanggil fungsi yang disediakan browser seperti document.getElementById()yang cukup cepat, sedangkan menggunakan pemilih turunan memanggil mesin Sizzle seperti yang disebutkan yang, meskipun cepat, lebih lambat dari alternatif yang disarankan.

doppelgreener
sumber
1

Saya pikir permintaan Anda untuk memilih hanya <span class = "my_class">hello</span>elemen ini, Anda telah melakukan seperti ini, Jika saya memahami pertanyaan Anda dengan benar, inilah jawabannya,

$("#my_id [class='my_class']").addClass('test');

DEMO

Thirumalai murugan
sumber
$("#my_id .my_class")adalah padanan yang lebih pendek; Anda tidak mendapatkan apa pun dari menggunakan selektor atribut dalam kasus ini.
doppelgreener
Saya harap itu juga melakukan pekerjaan yang sama dengan jawaban Anda, sementara saya menjawab pertanyaan yang Anda jawab, saya tidak memperhatikan bahwa sejak saya melakukan jawaban, saya belum menghapus pertanyaan itu.
Thirumalai murugan
1

Juga $( "#container" ).find( "div.robotarm" );
sama dengan:$( "div.robotarm", "#container" )

Pasha Oleynik
sumber