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

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

12

Selalu gunakan

//Super Fast
$('#my_id').find('.my_class');

dari pada

// Fast:
$('#my_id .my_class');

Lihat Aturan Kinerja JQuery .

Juga di Jquery Doc

— Niks Jain
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