Nejbližší předek elementu – closest

Pokud je skriptem vybrán nějaký element, jde se dostat pomocí parentNode k jeho nejbližšímu předkovi.

<div class="predek">
  <div id="potomek">
  </div>
</div>

Pro tento HTML kód to v JS vypadá následovně:

var potomek = document.getElementById("potomek");
var predek = potomek.parentNode;

Hodí se to například při přepínání třídy společnému obalu tlačítka a obsahu, který se má zobrazit/skrýt. Značný problém tohoto postupu je ale v tom, že je JS kód hodně závislý na změně HTML – stačí přidat třeba další obal, a vše přestane fungovat.

Pomocí closest jde nadřazený element specifikovat CSS selektorem (selektor se zadává podobně jako u querySelector/querySelectorAll).

Zápis

Metoda closest má jeden povinný parametr, což je CSS selektor.

<div class="predek">
  <div>
    <div id="potomek">
    </div>
  </div>
</div>

Pro tento HTML kód, kde je mezi potomkem a předkem další <div>, jde provést následující:

var potomek = document.getElementById("potomek");
var predek = potomek.closest('.predek');

Kód vybere nejbližší nadřazený element, co má třídu predek.

Zajímavé a trochu zrádné je, že se element může dostat i „sám na sebe“, bude-li vyhovovat zadanému selektoru.

potomek.closest('div');

Tato konstrukce tedy opět vybere potomka (protože se jedná o <div>, čímž bude vyhovovat zadanému selektoru).

Podpora

Metoda closest je zatím podporována pouze v následujících prohlížečích:

• Firefox 35,
• Chrome 41,
• Opera 18

Pro nepodporované prohlížeče jde podpora doskriptovat pomocí parentNode a querySelectoru nebo matches.

closest() v jQuery

JS knihovna jQuery disponuje obdobou nativní funkce closest.

Odkazy jinam

• MDN: Element.closest()