html - Jak získat následující/předchozí prvek pomocí JavaScriptu?

Jak získám další prvek v HTML pomocí JavaScriptu?

Předpokládejme, že mám tři <div>y a mám odkaz na jeden v JavaScriptovém kódu, chci zjistit, který je následující <div> a který je předchozí.

Odpověď č. 1

použijte vlastnosti nextSibling a previousSibling:

<div id="foo1"></div>
<div id="foo2"></div>
<div id="foo3"></div>

document.getElementById('foo2').nextSibling; // #foo3
document.getElementById('foo2').previousSibling; // #foo1

Nicméně v některých prohlížečích (už si nepamatuji, kterých) je také potřeba kontrolovat mezery a uzly komentářů:

var div = document.getElementById('foo2');
var nextSibling = div.nextSibling;
while(nextSibling && nextSibling.nodeType != 1) {
    nextSibling = nextSibling.nextSibling
}

Knihovny jako jQuery za vás všechny tyto kontroly napříč prohlížeči řeší automaticky.

Odpověď č. 2

Je to docela jednoduché. Zkuste místo toho toto:

let myReferenceDiv = document.getElementById('mydiv');
let prev = myReferenceDiv.previousElementSibling;
let next = myReferenceDiv.nextElementSibling;

Odpověď č. 3

Opravdu záleží na celkové struktuře vašeho dokumentu.

Pokud máš:

<div></div>
<div></div>
<div></div>

může to být tak jednoduché, jako projít pomocí

mydiv.nextSibling;
mydiv.previousSibling;

Pokud by se však další div mohl nacházet kdekoli v dokumentu, budete potřebovat složitější řešení. Můžete zkusit něco použítím

document.getElementsByTagName("div");

a procházet těmito, abyste se nějak dostali tam, kam chcete.

Pokud provádíte hodně složitého procházení DOM, jako je toto, doporučil bych podívat se na knihovnu, jako je jQuery.

Odpověď č. 4

No, v čistém JavaScriptu si myslím, že byste je nejprve museli shromáždit do kolekce.

var divs = document.getElementsByTagName("div");
//divs now contain each and every div element on the page
var selectionDiv = document.getElementById("MySecondDiv");

Takže v podstatě s selectionDiv procházejte kolekci, abyste našli jeho index, a pak samozřejmě -1=předchozí +1=další v rámci mezí

for(var i = 0; i < divs.length;i++)
{
   if(divs[i] == selectionDiv)
   {
     var previous = divs[i - 1];
     var next = divs[i + 1];
   }
}

Všimněte si však, když říkám, že by byla vyžadována další logika k ověření, že jste uvnitř hranic, tj. že nejste na konci nebo na začátku kolekce.

To také bude znamenat, že pokud máte div, který má hozený div jako potomka. Další div by nebyl sourozenec, ale potomek, takže pokud chcete pouze sourozence na stejné úrovni jako cílový div, rozhodně použijte nextSibling a kontrolujte vlastnost tagName.

Odpověď č. 5

Každý HTML prvek má atribut „previousElementSibling“.

Např. :

<div id="a">A</div>
<div id="b">B</div>
<div id="c">c</div>

<div id="result">Resultado: </div>

var b = document.getElementById("c").previousElementSibling;

document.getElementById("result").innerHTML += b.innerHTML;

Živě: http://jsfiddle.net/QukKM/

Odpověď č. 6

To bude snadné... je to čistý JavaScript kód

    <script>
           alert(document.getElementById("someElement").previousElementSibling.innerHTML);
    </script>

Odpověď č. 7

Všechna tato řešení vypadají jako přehánění. Proč bych měl použít mé řešení?

previousElementSibling podporováno od IE9

document.addEventListener potřebuje polyfill

previousSibling by mohl vrátit text

Vezměte prosím na vědomí, že jsem se rozhodl vrátit první/poslední prvek v případě, že jsou porušeny hranice. Při použití v RL bych upřednostnil, aby vracel null.

var el = document.getElementById("child1"),
    children = el.parentNode.children,
    len = children.length,
    ind = [].indexOf.call(children, el),
    nextEl = children[ind === len ? len : ind + 1],
    prevEl = children[ind === 0 ? 0 : ind - 1];
    
    document.write(nextEl.id);
    document.write("<br/>");
    document.write(prevEl.id);

<div id="parent">
  <div id="child1"></div>
  <div id="child2"></div>
</div>