Ottieni l'elemento successivo / precedente utilizzando JavaScript?

107

Come ottengo l'elemento successivo in HTML utilizzando JavaScript?

Supponiamo che io abbia tre <div>se ottengo un riferimento a uno nel codice JavaScript, voglio ottenere quale è il successivo <div>e quale è il precedente.

javascript html dom

— Amr Elgarhy
fonte

29

Bene, in puro javascript il mio pensiero è che dovresti prima raccoglierli all'interno di una raccolta.

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

Quindi fondamentalmente con selectionDiv iterare attraverso la raccolta per trovare il suo indice, e quindi ovviamente -1 = precedente +1 = successivo entro i limiti

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

Si prega di essere consapevoli, però, mentre dico che sarebbe necessaria una logica extra per verificare di essere entro i limiti, cioè non si è alla fine o all'inizio della raccolta.

Questo significherà anche che hai un div che ha un div figlio nidificato. Il div successivo non sarebbe un fratello ma un figlio, quindi se vuoi solo fratelli allo stesso livello del div di destinazione, usa definitivamente nextSibling controllando la proprietà tagName .

— REA_ANDREW
fonte

1

sembra una buona soluzione ma come ottenere l'elemento successivo, come hai scritto ora ho la collezione e quella selezionata, puoi aiutarmi di più?

— Amr Elgarhy,

248

usa le proprietà nextSiblinge previousSibling:

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

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

Tuttavia in alcuni browser (non ricordo quale) è necessario controllare anche gli spazi bianchi e i nodi di commento:

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

Librerie come jQuery gestiscono tutti questi controlli cross-browser per te fuori dagli schemi.

— Crescent Fresh
fonte

60

nextElementSibling è molto più utile.

— Trisped

9

Nota che né nextSibling né nextElementSibling sono completamente compatibili con browser diversi. NextSibling di Firefox restituisce i nodi di testo mentre IE no e nextElementsibling non è implementato fino a IE9.

— Carl Onager

2

Questo non funzionerà se gli elementi non sono fratelli.

— rvighne

1

@Kloar: la domanda chiedeva come ottenere il "prossimo elemento [div] in html". Il successivo divnel markup potrebbe non essere adiacente all'elemento; potrebbe essere un livello più profondo o un livello più alto.

— rvighne

1

@leonbloy non capisco il tuo commento. fondamentalmente stai dicendo if i write dirty HTML, Javascript will act strangeche ne dici di scrivere un html pulito e valido?

— Demenza

28

Dipende davvero dalla struttura generale del tuo documento.

Se hai:

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

può essere semplice come attraversare usando

mydiv.nextSibling;
mydiv.previousSibling;

Tuttavia, se il div "successivo" potesse trovarsi in un punto qualsiasi del documento, avrai bisogno di una soluzione più complessa. Potresti provare qualcosa usando

document.getElementsByTagName("div");

e correndo attraverso questi per arrivare dove vuoi in qualche modo.

Se stai eseguendo molti traversamenti DOM complessi come questo, ti consiglio di guardare in una libreria come jQuery.

— Andy Hume
fonte

2

nextSibling () .. dovrebbe essere nextSibling, credo

— paul_h

21

C'è un attributo su ogni HTMLElement, "previousElementSibling".

Ex:

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

Dal vivo: http://jsfiddle.net/QukKM/

— user1970894
fonte

Questo fallisce su IE8 (non ha controllato su altre versioni di IE). previousSiblingsembra essere la soluzione cross browser.

— Niks

14

Sarà facile ... è un codice javascript puro

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

— puffo
fonte

6

tutte queste soluzioni sembrano eccessive. Perché utilizzare la mia soluzione?

previousElementSibling supportato da IE9

document.addEventListener ha bisogno di un polyfill

previousSibling potrebbe restituire un testo

Si prega di notare che ho scelto di restituire il primo / ultimo elemento nel caso in cui i confini siano interrotti. In un utilizzo RL, preferirei che restituisse un valore nullo.

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>

Espandi lo snippet

— Dementic
fonte

0

L'ho testato e ha funzionato per me. L'elemento che mi trova cambia in base alla struttura del documento che hai.

<html>
    <head>
        <script type="text/javascript" src="test.js"></script>
    </head>
    <body>
        <form method="post" id = "formId" action="action.php" onsubmit="return false;">
            <table>
                <tr>
                    <td>
                        <label class="standard_text">E-mail</label>
                    </td>
                    <td><input class="textarea"  name="mail" id="mail" placeholder="E-mail"></label></td>
                    <td><input class="textarea"  name="name" id="name" placeholder="E-mail">   </label></td>
                    <td><input class="textarea"  name="myname" id="myname" placeholder="E-mail"></label></td>
                    <td><div class="check_icon icon_yes" style="display:none" id="mail_ok_icon"></div></td>
                    <td><div class="check_icon icon_no" style="display:none" id="mail_no_icon"></div></label></td>
                    <td><div class="check_message" style="display:none" id="mail_message"><label class="important_text">The email format is not correct!</label></div></td>
                </tr>
            </table>
            <input class="button_submit" type="submit" name="send_form" value="Register"/>
        </form>
    </body>
</html>

var inputs;
document.addEventListener("DOMContentLoaded", function(event) {
    var form = document.getElementById('formId');
    inputs = form.getElementsByTagName("input");
    for(var i = 0 ; i < inputs.length;i++) {
        inputs[i].addEventListener('keydown', function(e){
            if(e.keyCode == 13) {
                var currentIndex = findElement(e.target)
                if(currentIndex > -1 && currentIndex < inputs.length) {
                    inputs[currentIndex+1].focus();
                }
            }   
        });
    }
});

function findElement(element) {
    var index = -1;
    for(var i = 0; i < inputs.length; i++) {
        if(inputs[i] == element) {
            return i;
        }
    }
    return index;
}

— Nitin Misra
fonte