Periksa apakah ada leluhur yang memiliki kelas menggunakan jQuery

156

Apakah ada cara di jQuery untuk memeriksa apakah ada orang tua, grand-parent, great-grand-parent memiliki kelas.

Saya memiliki struktur markup yang membuat saya melakukan hal ini dalam kode:

$(elem).parent().parent().parent().parent().hasClass('left')

Namun, untuk keterbacaan kode saya ingin menghindari hal semacam ini. Apakah ada cara untuk mengatakan "ada orang tua / kakek nenek / buyut orang tua yang memiliki kelas ini"?

Saya menggunakan jQuery 1.7.2.

Crmpicco
sumber
stackoverflow.com/questions/16863917/… - jika seseorang ingin melakukannya tanpa jQuery
Robert Niestroj

Jawaban:

304
if ($elem.parents('.left').length) {

}
Alex
sumber
19
Terima kasih, apa yang saya butuhkan! Sebagai catatan, sementara praktek memperlakukan .lengthsebagai nilai kebenaran cukup produktif di JS, itu jauh lebih jelas dan lebih mudah dipahami.length > 0
dooleyo
2
Berikut ini link ke jQuery .parents () dokumentasi
H Dog
75

Ada banyak cara untuk memfilter unsur leluhur.

if ($elem.closest('.parentClass').length /* > 0*/) {/*...*/}
if ($elem.parents('.parentClass').length /* > 0*/) {/*...*/}
if ($elem.parents().hasClass('parentClass')) {/*...*/}
if ($('.parentClass').has($elem).length /* > 0*/) {/*...*/}
if ($elem.is('.parentClass *')) {/*...*/} 

Hati-hati , closest() metode menyertakan elemen itu sendiri saat memeriksa pemilih.

Atau, jika Anda memiliki pemilih unik yang cocok dengan $elem, misalnya #myElem, Anda dapat menggunakan:

if ($('.parentClass:has(#myElem)').length /* > 0*/) {/*...*/}
if(document.querySelector('.parentClass #myElem')) {/*...*/}

Jika Anda ingin mencocokkan elemen yang tergantung pada salah satu kelas leluhurnya untuk tujuan penataan saja, cukup gunakan aturan CSS :

.parentClass #myElem { /* CSS property set */ }
A. Wolff
sumber
2
Saya mungkin berani mengatakan (tanpa menguji ini) bahwa metode ini lebih baik. Elem.parents akan melintasi seluruh strucutre dom orangtua, di mana terdekat () harus (mungkin) berhenti setelah menemukan orangtua terdekat dengan elemen itu dan karenanya lebih efisien. Ini adalah dugaan tidak berpendidikan. Saya biasanya menggunakan terdekat (). Sepertinya saya menemukan topik baru untuk diteliti di blog saya! : P
dudewad
@dewaskan ya itu tapi ini cukup baru. Maksud saya dalam versi jq yang lebih lama, AFAIK, ini bukan masalahnya. Loop orang tua tidak terputus pada orang tua pertama yang cocok menggunakan terdekat (), tapi sekarang sudah. (tidak tahu sejak versi jq mana tapi saya cukup yakin benar pada pernyataan ini)
A. Wolff
Senang tahu, terima kasih atas informasinya. Aneh bahwa mereka tidak akan membangun pembobolan dari versi pertama.
dudewad
2
ketika tidak ada orang tua yang ditemukan, orang tua () lebih cepat daripada yang terdekat () jsperf.com/closest-vs-parents-foobar
Alex
3
@ Alex Cukup menarik memang, terima kasih untuk input! BTW, re-membaca pertanyaan, Is there any way in jQuery to check if any parent,..., closest()cek untuk elemen itu sendiri jadi ini tidak benar-benar menjawab pertanyaan, OP bisa berharap untuk explecitely mengecualikan elemen itu sendiri, sehingga ya, jawabannya adalah menggunakan.parents()
A. Wolff
7

Anda dapat menggunakan parentsmetode dengan .classpemilih yang ditentukan dan memeriksa apakah ada yang cocok dengan itu:

if ($elem.parents('.left').length != 0) {
    //someone has this class
}
Igor Dymov
sumber