JQuery menemukan elemen induk pertama dengan awalan kelas tertentu

124

Saya ingin mendapatkan orang tua pertama yang memiliki awalan kelas tertentu, misalkan:

<div class="div-a3332"> 
  <div class="div-a89892">
    <p>
      <div class="div-b2">
        <div id="divid">hi</div>
      </div>
    </p>
  </div>
</div>

Misalnya, elemen saya saat ini adalah #dividdan saya ingin mencari elemen pertama yang memiliki awalan kelas div-a. Jadi pada dasarnya itu akan memilih:

<div class="div-a89892">

jquery jquery-selectors

— Perjalanan waktu
sumber

Berhenti. Gunakan beberapa kelas, daripada menggabungkan informasi menjadi satu kelas. Pemilih 'pencocokan' lambat, dan desain ini tidak berskala untuk modifikasi apa pun. <div class='a'>, lalu berikan aturan untuk div.a. Saya tidak tahu mengapa Anda memasukkan divnama kelas sama sekali.

— Stefan Kendall

Namun, jangan menggabungkan data menjadi prefiks kelas. Ini adalah pola yang buruk, dan mudah diperbaiki dengan banyak kelas.

— Stefan Kendall

@StefanKendall: Terkadang Anda berurusan dengan omong kosong pihak ketiga orang lain, dan terkadang Anda mendukung aplikasi lama yang tidak dapat diperbaiki dengan cepat. Desain yang buruk adalah fakta kehidupan, dan ini adalah pertanyaan yang sangat sah.

— Nerdmaster

Jawaban:

222

Gunakan .closest()dengan selektor:

var $div = $('#divid').closest('div[class^="div-a"]');

— Matt Ball
sumber

BTW, tidak tahu mengapa ini tidak disukai. Pemilih awalan kelas rapuh, tetapi ini akan berfungsi.

— Matt Ball

Untuk OP: Pastikan elemen yang Anda cari adalah orang tua di suatu tempat di atas pohon DOM dan bukan saudara atau mirip dengan objek yang Anda cari (sesuai dokumentasi). Ini bukan "paling dekat di mana pun dalam dokumen" tetapi "paling dekat dengan mengerjakan pohon DOM".

— Christian P.

Tidak berhasil untuk saya. Juga, saya ingin menemukan elemen pertama yang memiliki awalan tertentu, yang tidak harus berupa elemen div.

— Time Travel

@Time kemudian menghapus divpemilih elemen: $('#divid').closest('[class^="div-a"]'). Seperti yang dikomentari oleh @Stefan, Anda harus benar-benar menggunakan banyak kelas.

— Matt Ball

Pemilih ini mengambil jumlah siklus yang tidak masuk akal (tetapi masih bisa cepat). Jika Anda perlu mendukung IE6, IE7, atau IE8, ini benar-benar dapat mengacaukan Anda jika DOM Anda tumbuh terlalu besar; IE menampilkan dialog "script is not responding" ketika sejumlah instruksi JS VM dijalankan, dan BUKAN setelah jangka waktu tertentu. Saya telah melihat skrip yang menyelesaikan penjelajah internet crash 0.1ms karena alasan ini.

— Stefan Kendall

Jquery kemudian mengizinkan Anda untuk menemukan orang tua dengan file .parents() metode tersebut.

Karenanya saya merekomendasikan penggunaan:

var $div = $('#divid').parents('div[class^="div-a"]');

Ini memberikan semua node induk yang cocok dengan selektor. Untuk mendapatkan orang tua pertama yang cocok dengan selektor gunakan:

var $div = $('#divid').parents('div[class^="div-a"]').eq(0);

Untuk kueri traversal DOM lainnya, lihat dokumentasi tentang melintasi DOM .

— Cerah R Gupta
sumber

Jawabannya tidak menyesatkan, ini hanya menampilkan alternatif lain untuk .closest (), .parents () terlihat lebih mudah dibaca dan merupakan solusi lain dari masalah tersebut.

— Cerah R Gupta

Closest adalah solusi yang lebih baik daripada ini karena yang terdekat hanya akan menemukan kecocokan pertama, sedangkan orang tua akan menemukan SEMUA kecocokan naik DOM. Jelas lebih efisien untuk digunakan terdekat, meskipun saya setuju, itu bukan fungsi bernama terbaik.

— Mog0

Cukup lucu, saya akhirnya menggunakan solusi ini karena .parentsUtil () tidak berfungsi seperti yang saya harapkan.

— Mark Handy