Temukan elemen leluhur terdekat yang memiliki kelas tertentu

Bagaimana saya bisa menemukan leluhur elemen yang paling dekat dengan pohon yang memiliki kelas tertentu, dalam JavaScript murni ? Misalnya, di pohon seperti ini:

<div class="far ancestor">
    <div class="near ancestor">
        <p>Where am I?</p>
    </div>
</div>

Maka saya ingin div.near.ancestorjika saya mencoba ini pdan mencari ancestor.

Pembaruan: Sekarang didukung di sebagian besar browser utama

document.querySelector("p").closest(".near.ancestor")

Perhatikan bahwa ini dapat mencocokkan penyeleksi, bukan hanya kelas

https://developer.mozilla.org/en-US/docs/Web/API/Element.closest

Untuk peramban lawas yang tidak mendukung closest()tetapi memilikinya, matches()dapat membangun pencocokan pemilih yang mirip dengan pencocokan kelas @ rvighne:

function findAncestor (el, sel) {
    while ((el = el.parentElement) && !((el.matches || el.matchesSelector).call(el,sel)));
    return el;
}

Ini caranya:

function findAncestor (el, cls) {
    while ((el = el.parentElement) && !el.classList.contains(cls));
    return el;
}

Loop sementara menunggu hingga elmemiliki kelas yang diinginkan, dan mengatur elke elorangtua setiap iterasi sehingga pada akhirnya, Anda memiliki leluhur dengan kelas itu atau null.

Ini biola , jika ada yang ingin memperbaikinya. Ini tidak akan berfungsi pada browser lama (yaitu IE); lihat tabel kompatibilitas ini untuk classList . parentElementdigunakan di sini karena parentNodeakan melibatkan lebih banyak pekerjaan untuk memastikan bahwa simpul adalah elemen.

Gunakan element.closest ()

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

Lihat contoh ini DOM:

<article>
  <div id="div-01">Here is div-01
    <div id="div-02">Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>

Ini adalah bagaimana Anda akan menggunakan element.closest:

var el = document.getElementById('div-03');

var r1 = el.closest("#div-02");  
// returns the element with the id=div-02

var r2 = el.closest("div div");  
// returns the closest ancestor which is a div in div, here is div-03 itself

var r3 = el.closest("article > div");  
// returns the closest ancestor which is a div and has a parent article, here is div-01

var r4 = el.closest(":not(div)");
// returns the closest ancestor which is not a div, here is the outmost article

Berdasarkan jawaban the8472 dan https://developer.mozilla.org/en-US/docs/Web/API/Element/matches di sini adalah solusi cross-platform 2017:

if (!Element.prototype.matches) {
    Element.prototype.matches =
        Element.prototype.matchesSelector ||
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector ||
        Element.prototype.oMatchesSelector ||
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length;
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1;
        };
}

function findAncestor(el, sel) {
    if (typeof el.closest === 'function') {
        return el.closest(sel) || null;
    }
    while (el) {
        if (el.matches(sel)) {
            return el;
        }
        el = el.parentElement;
    }
    return null;
}

Solusi @rvighne bekerja dengan baik, tetapi seperti yang diidentifikasi dalam komentar ParentElementdan ClassListkeduanya memiliki masalah kompatibilitas. Untuk membuatnya lebih kompatibel, saya telah menggunakan:

function findAncestor (el, cls) {
    while ((el = el.parentNode) && el.className.indexOf(cls) < 0);
    return el;
}

• parentNodeproperti bukan parentElementproperti
• indexOfmetode di classNameproperti bukan containsmetode di classListproperti.

Tentu saja, indexOf hanya mencari keberadaan string itu, tidak peduli apakah itu keseluruhan string atau tidak. Jadi jika Anda memiliki elemen lain dengan kelas 'leluhur-jenis' itu masih akan kembali sebagai telah menemukan 'leluhur', jika ini merupakan masalah bagi Anda, mungkin Anda dapat menggunakan regexp untuk menemukan pasangan yang tepat.