Obter o próximo elemento / anterior usando JavaScript?

107

Como obtenho o próximo elemento em HTML usando JavaScript?

Suponha que eu tenha três se <div>obtenho uma referência a um no código JavaScript, desejo saber qual é o próximo <div>e qual é o anterior.

javascript html dom

— Amr Elgarhy
fonte

29

Bem, em javascript puro, meu pensamento é que primeiro você teria que agrupá-los dentro de uma coleção.

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

Então, basicamente com selectionDiv iterar através da coleção para encontrar seu índice, e então, obviamente, -1 = anterior +1 = próximo dentro dos limites

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

Porém, esteja ciente de que, como eu disse, uma lógica extra seria necessária para verificar se você está dentro dos limites, ou seja, você não está no final ou no início da coleção.

Isso também significa que você tem um div que tem um div filho aninhado. O próximo div não seria um irmão, mas um filho. Portanto, se você deseja apenas irmãos no mesmo nível do div de destino, use a verificação de nextSibling na propriedade tagName .

— REA_ANDREW
fonte

1

parece uma boa solução, mas como obter o próximo elemento, como você escreveu agora, tenho a coleção e a selecionada, você pode me ajudar mais?

— Amr Elgarhy

248

use as propriedades nextSiblinge previousSibling:

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

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

No entanto, em alguns navegadores (esqueci qual), você também precisa verificar se há espaços em branco e nós de comentário:

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

Bibliotecas como o jQuery lidam com todas essas verificações cross-browser para você imediatamente.

— Crescent Fresh
fonte

60

nextElementSibling é muito mais útil.

— Trisped de

9

Observe que nem nextSibling nem nextElementSibling são totalmente compatíveis entre navegadores. NextSibling do Firefox retorna nós de texto, enquanto o IE não e nextElementsibling não é implementado até o IE9.

— Carl Onager de

2

Isso não funcionará se os elementos não forem irmãos.

— rvighne

1

@Kloar: A pergunta feita como obter o "próximo elemento [div] em html." O próximo divna marcação pode não ser adjacente ao elemento; pode ser um nível mais profundo ou um nível mais alto.

— rvighne

1

@leonbloy não entendi seu comentário. você está basicamente dizendo if i write dirty HTML, Javascript will act strangeque tal escrever html limpo e válido?

— Demência

28

Realmente depende da estrutura geral do seu documento.

Se você tem:

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

pode ser tão simples quanto percorrer usando

mydiv.nextSibling;
mydiv.previousSibling;

No entanto, se o 'próximo' div puder estar em qualquer lugar do documento, você precisará de uma solução mais complexa. Você poderia tentar algo usando

document.getElementsByTagName("div");

e examiná-los para chegar onde você deseja de alguma forma.

Se você estiver fazendo muitas travessias de DOM complexas como essa, recomendo procurar uma biblioteca como a jQuery.

— Andy Hume
fonte

2

nextSibling () .. deve ser nextSibling, eu acho

— paul_h

21

Há um atributo em 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;

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

— user1970894
fonte

Isso falha no IE8 (não foi verificado em outras versões do IE). previousSiblingparece ser a solução para vários navegadores.

— Niks

14

Isso vai ser fácil ... é um código javascript puro

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

— smurf
fonte

6

todas essas soluções parecem um exagero. Por que usar minha solução?

previousElementSibling suportado pelo IE9

document.addEventListener precisa de um polyfill

previousSibling pode retornar um texto

Observe que escolhi retornar o primeiro / último elemento caso os limites sejam quebrados. Em um uso de RL, eu preferiria que ele retornasse um 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 snippet

— Demencial
fonte

0

Testei e funcionou para mim. O elemento que me encontra muda de acordo com a estrutura do documento que você tem.

<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