Trova l'elemento antenato più vicino che ha una classe specifica

Come posso trovare l'antenato di un elemento più vicino all'albero che ha una classe particolare, in puro JavaScript ? Ad esempio, in un albero come questo:

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

Quindi voglio div.near.ancestorse provo questo su pe cerco ancestor.

Aggiornamento: ora supportato nella maggior parte dei browser principali

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

Nota che questo può corrispondere ai selettori, non solo alle classi

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

Per i browser legacy che non supportano closest()ma hanno matches()uno in grado di creare una corrispondenza dei selettori simile alla corrispondenza di classe di @ rvighne:

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

Questo fa il trucco:

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

Il ciclo while attende fino a quando non elha la classe desiderata e imposta elsu elparent ogni iterazione, quindi alla fine hai l'antenato con quella classe o null.

Ecco un violino , se qualcuno vuole migliorarlo. Non funzionerà con i vecchi browser (cioè IE); vedere questa tabella di compatibilità per classList . parentElementviene utilizzato qui perché parentNoderichiederebbe più lavoro per assicurarsi che il nodo sia un elemento.

Usa element.closest ()

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

Vedi questo DOM di esempio:

<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>

Ecco come useresti 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

Sulla base della risposta the8472 e https://developer.mozilla.org/en-US/docs/Web/API/Element/matches ecco la soluzione multipiattaforma 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;
}

La soluzione @rvighne funziona bene, ma come identificato nei commenti ParentElemented ClassListentrambi hanno problemi di compatibilità. Per renderlo più compatibile, ho usato:

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

• parentNodeproprietà anziché parentElementproprietà
• indexOfmetodo sulla classNameproprietà anziché il containsmetodo sulla classListproprietà.

Ovviamente, indexOf sta semplicemente cercando la presenza di quella stringa, non gli importa se è l'intera stringa o no. Quindi, se avessi un altro elemento con classe 'tipo antenato', tornerebbe comunque ad aver trovato 'antenato', se questo è un problema per te, forse puoi usare regexp per trovare una corrispondenza esatta.