Předchozí/další element v JavaScriptu

Následující sourozenec nextSibling

Při vyhledávání elementů pomocí JavaScriptu slouží nextSibling pro získání následujícího sourozence.

Problém je, že jako následující sourozenec je brán kromě HTML elementů i textový obsah.

Bude-li existovat násludjící kód:

<div class="prvni">1</div>
<div class="druhy">2</div>

JavaScriptová konstrukce využívající nexSibling nezachytí element .druhy:

document.querySelector(".prvni").nextSibling;

V tomto případě budou zachyceny bílé znaky mezi elementy.

Dostat se na element .druhy by znamenalo:

1. Použít nextSibling dvakrát:

   document.querySelector(".prvni").nextSibling.nextSibling;

2. Zrušit bílé znaky mezi HTML značkami.

   <div class="prvni">1</div><div class="druhy">2</div>

Následující element – nextElementSibling

Situaci, kdy nextSibling vrátí bílé znaky, řeší nextElementSibling, který bere v potaz pouze HTML elementy.

document.querySelector(".prvni").nextElementSibling;

Vlastnost nextElementSibling funguje od IE 9 a pro starší prohlížeče jde doskriptovat s využitím nextSibling.

var nextElementSibling = function(el) {
    do {
        el = el.nextSibling;
    } while (el && el.nodeType !== 1);
    return el;
};

Použití:

var druhy = nextElementSibling(
  document.querySelector(".prvni")
);

Živá ukázka

Předchozí – previousSibling a previousElementSibling

Metody pro získání předchozího sourozence nebo předchozího elementu fungují obdobně jako next*Sibling.

document.querySelector(".druhy").previousSibling;

Případně pro získání předchozího elementu.

document.querySelector(".druhy").previousElementSibling;

Další/předchozí v jQuery

V jQuery existují pro předchozí a další element klíčová slova prev a next a fungují jako nextElementSibling/previousElementSibling.

Následující:

$(".prvni").next();

Předchozí:

$(".druhy").prev();

Odkazy jinam

• MDN: NonDocumentTypeChildNode.nextElementSibling