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

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

Berikut ini link ke jQuery .parents () dokumentasi

— H Dog

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

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

ketika tidak ada orang tua yang ditemukan, orang tua () lebih cepat daripada yang terdekat () jsperf.com/closest-vs-parents-foobar

— Alex

@ 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

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