Tìm phần tử tổ tiên gần nhất có một lớp cụ thể

Làm cách nào tôi có thể tìm thấy tổ tiên của một phần tử gần cây nhất có một lớp cụ thể, bằng JavaScript thuần ? Ví dụ, trong một cái cây như vậy:

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

Sau đó, tôi muốn div.near.ancestornếu tôi thử điều này trên pvà tìm kiếm ancestor.

Cập nhật: Hiện được hỗ trợ trong hầu hết các trình duyệt chính

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

Lưu ý rằng điều này có thể phù hợp với các bộ chọn, không chỉ các lớp

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

Đối với các trình duyệt cũ không hỗ trợ closest()nhưng có matches()một trình duyệt có thể tạo kết hợp khớp chọn tương tự như đối sánh lớp của @ rvighne:

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

Đây là mẹo:

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

Trong khi chờ đợi vòng lặp cho đến khi elcó lớp mong muốn, và nó đặt elđể el's cha mẹ mỗi lần lặp nên cuối cùng, bạn có tổ tiên với lớp đó hoặcnull .

Đây là một câu đố , nếu bất cứ ai muốn cải thiện nó. Nó sẽ không hoạt động trên các trình duyệt cũ (ví dụ IE); xem bảng tương thích này cho classList . parentElementđược sử dụng ở đây vì parentNodesẽ liên quan đến nhiều công việc hơn để đảm bảo rằng nút là một phần tử.

Sử dụng phần tử.closest ()

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

Xem ví dụ này 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>

Đây là cách bạn sẽ sử dụng 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

Dựa trên câu trả lời8472 và https://developer.mozilla.org/en-US/docs/Web/API/Euity/matches ở đây là giải pháp đa nền tảng 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;
}

Giải pháp @rvighne hoạt động tốt, nhưng như được xác định trong các nhận xét ParentElementvà ClassListcả hai đều có vấn đề tương thích. Để làm cho nó tương thích hơn, tôi đã sử dụng:

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

• parentNodetài sản thay vì parentElementtài sản
• indexOfphương pháp trên classNametài sản thay vì containsphương pháp trên classListtài sản.

Tất nhiên, indexOf chỉ đơn giản là tìm kiếm sự hiện diện của chuỗi đó, nó không quan tâm nếu nó là toàn bộ chuỗi hay không. Vì vậy, nếu bạn có một yếu tố khác với loại 'tổ tiên', nó vẫn sẽ trở lại như đã tìm thấy 'tổ tiên', nếu đây là một vấn đề đối với bạn, có lẽ bạn có thể sử dụng regrec để tìm một kết quả khớp chính xác.