web-dev-qa-db-fra.com

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

Comment puis-je obtenir le prochain élément HTML en utilisant JavaScript?

Supposons que j'ai trois <div>s et que je reçoive une référence à un code JavaScript, je veux savoir quel est le prochain <div> et quel est le précédent.

javascripthtmldom
90
Amr Elgarhy

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

Soyez conscient cependant que, comme je le dis, 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 une div qui a une div enfant imbriquée. La prochaine div ne sera pas un frère, mais un enfant. Donc, si vous voulez seulement des frères au même niveau que la div cible, utilisez certainement nextSibling pour vérifier la propriété tagName .

25
REA_ANDREW

utilisez les nextSibling et previousSibling properties:

<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 (je ne sais plus lequel), vous devez également vérifier les espaces et les nœuds de commentaires:

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

Des bibliothèques telles que jQuery gèrent toutes ces vérifications multi-navigateurs pour vous.

215
Crescent Fresh

Cela dépend vraiment de la structure générale de votre document.

Si tu as:

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

il peut être aussi simple que de traverser en utilisant

mydiv.nextSibling;
mydiv.previousSibling;

Toutefois, si la «prochaine» division peut figurer 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 courir à travers ceux-ci pour arriver où vous voulez en quelque sorte.

Si vous parcourez beaucoup de DOM complexes comme celui-ci, je vous conseillerais de chercher dans une bibliothèque telle que jQuery.

22
Andy Hume

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;

Live: http://jsfiddle.net/QukKM/

18
user1970894

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

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

toutes ces solutions ressemblent à une surdose ... Pourquoi utiliser ma solution?

previousElementSibling pris en charge par IE9

document.addEventListener a besoin d'un polyfill

previousSibling pourrait retourner un texte

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

2
Dementic

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;
}
0
Nitin Misra