Bagaimana saya bisa memilih item dengan kelas dalam DIV?

142

Saya memiliki HTML berikut:

<div id="mydiv">
  <div class="myclass"></div>
</div>

Saya ingin dapat menggunakan pemilih yang memilih bagian dalam div, tetapi khusus untuk mydivwadah. Bagaimana saya bisa mencapai ini dengan jQuery?

javascript jquery html class jquery-selectors Idan Shechter
sumber

Jawaban:

285

Mencoba:

$('#mydiv').find('.myclass');

Demo JS Fiddle .

Atau:

$('.myclass','#mydiv');

Demo JS Fiddle .

Atau:

$('#mydiv .myclass');

Demo JS Fiddle .

Referensi:

Bagus untuk belajar dari find()dokumentasi:

Metode .find () dan .children () serupa, kecuali bahwa yang terakhir hanya bergerak satu tingkat ke bawah pohon DOM.

David mengatakan mengembalikan Monica
sumber
2
dua yang kedua tidak akan berfungsi, tetapi find adalah Ok. Dua yang kedua akan memilih setiap kelas = myclass dan memilih setiap id = mydiv) saya pikir.
czupe
2
@czupe: tidak, sedangkan pendekatan pemilih konteks ditulis secara berbeda mengimplementasikan jQuery, secara internal, $('#mydiv').find('.myclass');pendekatan yang sama seperti yang digunakan dalam cuplikan kode pertama. Kebetulan: '... pilih setiap id=mydiv'? Ada seharusnya hanya pernah menjadi salah satu penggunaan yang diberikan iddi halaman (sebuah id harus unik dalam dokumen ).
David mengatakan mengembalikan Monica
@DavidThomas Yah aku baru saja mencoba $ ('# mydiv .myclass'); dan itu akhirnya memilih semua div yang memiliki kelas myclass daripada hanya divs dalam mydiv.
user3281466
@ user3281466: benarkah? Tampaknya tidak mungkin, bisakah Anda mereproduksi masalah Anda ?
David mengatakan mengembalikan Monica
bagaimana Anda memeriksa apa saja di di div dan kemudian memasukkannya ke: not ()
SuperUberDuper
20

Coba ini

$("#mydiv div.myclass")
ShankarSangoli
sumber
Atau jika Anda tidak peduli apakah itu a div(atau jika akan selalu a div) Anda dapat menyederhanakan menjadi $ ("# mydiv .myclass").
Michael Mior
@Michael - Ya, kita bisa saja mengatakan .mycalss tetapi jika kita tahu itu div, div.myclass akan membuat pencarian lebih cepat.
ShankarSangoli
@Shankar, kemungkinan besar tidak akan membuatnya lebih cepat, lebih lambat. dengan asumsi jquery menggunakan sizzle dan bukan asli document.queryselectorallitu mungkin akan mencari dengan cara yang sama dan dalam kasus Anda melakukan pemeriksaan tambahan . Kemungkinan implementasi asli melakukan hal yang sama.
davin
Beberapa tes cepat yang saya jalankan menyarankan bahwa ini tergantung pada browser. Itu muncul sedikit lebih cepat di Chrome dan sedikit lebih lambat di FF. Either way, kecuali Anda menjalankan pemilih ini berkali-kali atau lebih dari sejumlah besar elemen, perbedaannya mungkin diabaikan. Lihat di sini untuk tes kasar saya (dan mungkin cacat).
Michael Mior
@Michael - Jika kita menentukan tagname bersama dengan nama kelas, pertama-tama akan menggunakan getElementsByTagName dan kemudian mencari nama kelas yang pasti lebih cepat dan masih menggunakan metode asli untuk melakukan penyortiran tingkat pertama. Lagipula itu diabaikan jika tidak ada banyak elemen yang akan dipilih.
ShankarSangoli
11

Anda akan melakukannya dengan cara yang sama Anda akan menerapkan pemilih css. Untuk instanse bisa Anda lakukan

$("#mydiv > .myclass")

atau

$("#mydiv .myclass")

Yang terakhir akan cocok dengan setiap myclass di dalam myDiv, termasuk myclass di dalam myclass.

Leandro Galluppi
sumber
6

Jika Anda ingin memilih setiap elemen yang memiliki atribut kelas "myclass" gunakan

$('#mydiv .myclass');

Jika Anda ingin memilih hanya elemen div yang memiliki atribut kelas "myclass" gunakan

$("div#mydiv div.myclass");

temukan lebih banyak tentang penyeleksi jquery lihat artikel ini

e11438
sumber
1

coba ini sebagai gantinya $(".video-divs.focused"). Ini berfungsi jika Anda mencari video-div yang fokus.

pengguna3749775
sumber