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.
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.
Réponses:
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 .
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; // #foo1Cependant, 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.
divdans le balisage peut ne pas être adjacent à l'élément; cela peut être un niveau plus profond ou un niveau supérieur.
if i write dirty HTML, Javascript will act strangeque diriez-vous d'écrire du HTML propre et valide?
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.
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/
previousSiblingsemble être la solution multi-navigateurs.
Ce sera facile ... c'est un pur code javascript
<script>
alert(document.getElementById("someElement").previousElementSibling.innerHTML);
</script>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>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;
}