Obtenir l'élément suivant / précédent en utilisant JavaScript?

107

Comment obtenir l'élément suivant en HTML à l'aide de JavaScript?

Supposons que j'ai trois <div>s et que j'obtienne une référence à un dans le code JavaScript, je veux savoir lequel est le suivant <div>et lequel est le précédent.

javascript html dom Amr Elgarhy
la source

29

Eh bien, en javascript pur, je pense que vous devez d'abord les rassembler dans une collection.

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

Donc, fondamentalement, avec selectionDiv, parcourez la collection pour trouver son index, puis évidemment -1 = précédent +1 = suivant dans les limites

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

Attention cependant, comme je l'ai dit, une logique supplémentaire serait nécessaire pour vérifier que vous êtes dans les limites, c'est-à-dire que vous n'êtes pas à la fin ou au début de la collection.

Cela signifie également que vous avez un div qui a un div enfant imbriqué. Le div suivant ne serait pas un frère mais un enfant, donc si vous ne voulez que des frères et sœurs au même niveau que le div cible, utilisez définitivement nextSibling en vérifiant la propriété tagName .

REA_ANDREW
la source

1

couture bonne solution mais comment obtenir l'élément suivant, comme vous l'avez écrit maintenant, j'ai la collection et celle sélectionnée, pouvez-vous m'aider davantage?

Amr Elgarhy le

248

utilisez les propriétés nextSiblinget previousSibling:

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

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

Cependant, dans certains navigateurs (j'oublie lesquels), vous devez également vérifier les espaces et les nœuds de commentaire:

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

Les bibliothèques telles que jQuery gèrent toutes ces vérifications inter-navigateurs à votre place.

Croissant frais
la source

60

nextElementSibling est beaucoup plus utile.

Trisped

9

Notez que ni nextSibling ni nextElementSibling ne sont entièrement compatibles avec tous les navigateurs. Le prochainSibling de Firefox renvoie les nœuds de texte alors que IE ne le fait pas et nextElementsibling n'est pas implémenté avant IE9.

Carl Onager

2

Cela ne fonctionnera pas si les éléments ne sont pas des frères et sœurs.

rvighne

1

@Kloar: La question demandait comment obtenir le "prochain élément [div] en html". Le suivant divdans le balisage peut ne pas être adjacent à l'élément; cela peut être un niveau plus profond ou un niveau supérieur.

rvighne

1

@leonbloy je ne comprends pas votre commentaire. vous dites fondamentalement if i write dirty HTML, Javascript will act strangeque diriez-vous d'écrire du HTML propre et valide?

Dementic

28

Dépend vraiment de la structure globale de votre document.

Si tu as:

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

cela peut être aussi simple que de parcourir en utilisant

mydiv.nextSibling;
mydiv.previousSibling;

Cependant, si la division «suivante» peut être n'importe où dans le document, vous aurez besoin d'une solution plus complexe. Vous pouvez essayer quelque chose en utilisant

document.getElementsByTagName("div");

et les parcourir pour arriver où vous le souhaitez.

Si vous faites beaucoup de traversées DOM complexes telles que celle-ci, je vous recommande de rechercher une bibliothèque telle que jQuery.

Andy Hume
la source

2

nextSibling () .. devrait être suivantSibling, je pense

paul_h

21

Il existe un attribut sur chaque 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 direct: http://jsfiddle.net/QukKM/

user1970894
la source

Cela échoue sur IE8 (n'a pas vérifié sur les autres versions d'IE). previousSiblingsemble être la solution multi-navigateurs.

Niks

14

Ce sera facile ... c'est un pur code javascript

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

schtroumpf
la source

6

toutes ces solutions semblent exagérées. Pourquoi utiliser ma solution?

previousElementSibling pris en charge depuis IE9

document.addEventListener a besoin d'un polyfill

previousSibling pourrait renvoyer un texte

Veuillez noter que j'ai choisi de renvoyer le premier / dernier élément au cas où les limites seraient brisées. Dans une utilisation RL, je préférerais qu'il renvoie un 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>

Développer l'extrait

Démence
la source

0

Je l'ai testé et cela a fonctionné pour moi. L'élément me trouvant change selon la structure du document que vous avez.

<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
la source

Obtenir l'élément suivant / précédent en utilisant JavaScript?

Réponses: