¿Obtener el elemento siguiente / anterior usando JavaScript?

107

¿Cómo obtengo el siguiente elemento en HTML usando JavaScript?

Supongamos que tengo tres <div>sy obtengo una referencia a uno en el código JavaScript, quiero obtener cuál es el siguiente <div>y cuál es el anterior.

javascript html dom

— Amr Elgarhy
fuente

29

Bueno, en javascript puro, mi pensamiento es que primero tendrías que recopilarlos dentro de una colección.

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

Básicamente, con selectionDiv iterar a través de la colección para encontrar su índice, y luego obviamente -1 = anterior +1 = siguiente dentro de los límites

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

Sin embargo, tenga en cuenta que, como digo, se necesitaría una lógica adicional para verificar que se encuentra dentro de los límites, es decir, que no se encuentra al final o al comienzo de la colección.

Esto también significará que tienes un div que tiene un div hijo anidado. El siguiente div no sería un hermano sino un hijo, por lo que si solo desea hermanos en el mismo nivel que el div objetivo, definitivamente use nextSibling verificando la propiedad tagName .

— REA_ANDREW
fuente

1

costuras buena solución pero cómo obtener el siguiente elemento, como escribiste ahora tengo la colección y la seleccionada, ¿puedes ayudarme más?

— Amr Elgarhy

248

use las propiedades nextSiblingy previousSibling:

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

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

Sin embargo, en algunos navegadores (no recuerdo cuál) también debe verificar los espacios en blanco y los nodos de comentarios:

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

Bibliotecas como jQuery manejan todas estas comprobaciones entre navegadores de forma inmediata.

— Creciente fresco
fuente

60

nextElementSibling es mucho más útil.

— Trisped

9

Tenga en cuenta que ni nextSibling ni nextElementSibling son totalmente compatibles con todos los navegadores. NextSibling de Firefox devuelve nodos de texto, mientras que IE no y nextElementsibling no se implementa hasta IE9.

— Carl Onager

2

Esto no funcionará si los elementos no son hermanos.

— rvighne

1

@Kloar: La pregunta era cómo obtener el "siguiente elemento [div] en html". Es posible que el siguiente diven el marcado no sea adyacente al elemento; podría ser un nivel más profundo o un nivel más alto.

— rvighne

1

@leonbloy no entiendo tu comentario. Básicamente estás diciendo if i write dirty HTML, Javascript will act strange¿qué tal si escribes un HTML limpio y válido?

— Dementic

28

Realmente depende de la estructura general de su documento.

Si usted tiene:

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

puede ser tan simple como atravesar el uso

mydiv.nextSibling;
mydiv.previousSibling;

Sin embargo, si el "siguiente" div podría estar en cualquier parte del documento, necesitará una solución más compleja. Podrías probar algo usando

document.getElementsByTagName("div");

y ejecutarlos para llegar a donde quieres de alguna manera.

Si está haciendo muchos recorridos DOM complejos como este, le recomendaría buscar en una biblioteca como jQuery.

— Andy Hume
fuente

2

nextSibling () .. debería ser nextSibling, creo

— paul_h

21

Hay un atributo en cada 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;

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

— user1970894
fuente

Esto falla en IE8 (no he comprobado en otras versiones de IE). previousSiblingparece ser la solución de varios navegadores.

— Niks

14

Esto será fácil ... es un código javascript puro

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

— pitufo
fuente

6

todas estas soluciones parecen exageradas. ¿Por qué usar mi solución?

previousElementSibling compatible con IE9

document.addEventListener necesita un polyfill

previousSibling podría devolver un mensaje de texto

Tenga en cuenta que he elegido devolver el primer / último elemento en caso de que se rompan los límites. En un uso de RL, preferiría que devolviera un valor nulo.

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>

Expandir fragmento

— Dementico
fuente

0

Lo probé y funcionó para mí. El elemento que me encuentra cambia según la estructura del documento que tiene.

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