Javascript closest

Javascript closest() Container Element

closest () gibt das nahegelegenste übergeordnete Element – einen Vorfahren oder Container – zurück, das einem CSS-Selektor entspricht, oder eine Referenz auf sich selber, wenn das Element selbst schon zum Selektor passt. Das erspart viele Abfragen und macht den Scriptcode lesbarer.

Das ist genauso komfortabel wie die gleichnamige jQuery-Methode und wird von allen modernen Browsern (außer von IE11) unterstützt.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

closest – Suche den übergeordneten Container

Die Suche nach den Vorfahren oder umfassenden Elementen gehört vor allem in Slideshows und verschachtelten Menüs zu den wiederkehrenden Aufgaben.

elem.closest(selector)

closest() findet das nächste übergeordnete Element – einen Container oder Vorfahren – anhand eines einfachen Selektors. closest() gehört zu den eleganten jQuery-Methoden, die wir im reinen Javascript lange schmerzlich vermisst haben.

closest – find closest parent element by css selector
closest () – finde das nahegelegensten parent element mit CSS-Selektor

Inzwischen gehört closest() zu den DOM-Methoden von Vanilla Javascript, und wird auch schon auf den älteren Versionen der mobilen Geräte (iOS ab Version 9, Android 76 ) unterstützt, nicht aber von IE11.

lampe-01 Lampe Melinda Höhe 34cm Buchenholz 68 €
Melinda
lampe-01 Lampe Santori Höhe 34cm Buchenholz / Aluminium 72 €
Santori
lampe-01 Lampe Silenzium Höhe 34cm Buche / Eiche / Stoff 72 €
Silenzium
const caption = document.querySelectorAll(".cards figcaption");
for (const elem of caption) {
	elem.addEventListener ("click", (eve) => {
		const figure = elem.closest("figure");
		let card = figure.querySelector("lamp-desc");
		card.classList.toggle ("visible");
		elem.classList.toggle ("open")
	})
}

Die herkömmlichen Methoden parentNode oder parentElement erwischten nur den direkten Vorfahren und mussten in einer Schleife bei jedem Vorfahren fragen, ob er dem gewünschten Selektor entspricht.

matches()

Passt gut zu closest: matches(). matches() stellt fest, ob ein Element zum einem bestimmten Selektor passt. matches wird von allen modernen Browsern unterstützt, nur IE11 braucht noch einen Präfix.

if (elem.matches(selector))

Ein find() als Pendant zu closest() – so wie in jQuery – gibt es übrigens nicht, und obendrein ist find() schon von array besetzt.

parentElement

querySelectorAll, getElementsByTagName und getElementsByClassName geben NodeLists (auch Collections oder Sammlungen) zurück – das sind keine Arrays. Für die Bestimmung des Index in einer NodeList wird parentNode oder parentElement gebraucht:

  • Ananas
  • Erdbeere
  • Melone
<ul class="fruity">
  <li>Ananas</li>
  <li>Erdbeere</li>
  <li>Melone</li>
</ul>
// Index in einer Nodelist mit parentNode oder parentElement finden
var images = ["fruity-01.svg","fruity-02.svg","fruity-03.svg",];

var fruity = document.querySelectorAll(".fruity li");

for (var i=0; i<fruity.length; i++) {
  fruity[i].addEventListener ('click', function () {
    var img = document.createElement("IMG");
    var index = Array.prototype.indexOf.call(this.parentElement.children, this);
    img.setAttribute("src",images[index]);
    document.querySelector(".demonodes").appendChild(img);
  });
}

Anstelle von parentElement hätte parentNode denselben Zweck erfüllt, denn es ist so gut wie ausgeschlossen, dass ein Text, ein Zeilenumbruch oder ein Kommentar ein parentNode ist.

Polyfill für IE11

Immer noch Fan von IE11? Um IE11 mit closest() bekannt zu machen, behilft man sich mit einem Polyfill.

if (window.Element && !Element.prototype.closest) {
    Element.prototype.closest =
    function(s) {
        var matches = (this.document || this.ownerDocument).querySelectorAll(s),
            i,
            el = this;
        do {
            i = matches.length;
            while (--i >= 0 && matches.item(i) !== el) {};
        } while ((i < 0) && (el = el.parentElement));
        return el;
    };
}