it-swarm.com.de

Nächstes/vorheriges Element mit JavaScript erhalten?

Wie bekomme ich mit JavaScript das nächste Element in HTML?

Angenommen, ich habe drei <div>s und bekomme einen Verweis auf einen in JavaScript-Code. Ich möchte abrufen, welcher der nächste <div> ist und welcher der vorherige ist.

90
Amr Elgarhy

Nun, in reinem Javascript denke ich, dass Sie sie zuerst in einer Sammlung zusammenstellen müssen. 

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

Also im Grunde mit selectionDiv durchlaufen die Collection den Index und dann offensichtlich -1 = previous +1 = next innerhalb der Grenzen

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

Bitte beachten Sie jedoch, da ich sage, dass eine zusätzliche Logik erforderlich ist, um zu überprüfen, ob Sie sich innerhalb der Grenzen befinden, d. H. Sie befinden sich nicht am Ende oder am Beginn der Sammlung.

Dies bedeutet auch, dass Sie ein div haben, das ein untergeordnetes div hat. Das nächste div wäre kein Geschwister, sondern ein Kind. Wenn Sie also nur Geschwister auf der gleichen Ebene wie das Zieldiv wollen, verwenden Sie nextSibling auf jeden Fall und prüfen Sie die Eigenschaft tagName .

25
REA_ANDREW

benutze die nextSibling und previousSibling Eigenschaften:

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

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

In einigen Browsern (ich vergesse welchen) müssen Sie jedoch auch nach Leerzeichen- und Kommentarknoten suchen:

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

Bibliotheken wie jQuery erledigen all diese Cross-Browser-Prüfungen für Sie.

215
Crescent Fresh

Hängt wirklich von der Gesamtstruktur Ihres Dokuments ab.

Wenn Sie haben:

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

es kann so einfach sein wie das Durchfahren mit

mydiv.nextSibling;
mydiv.previousSibling;

Wenn das 'nächste' div irgendwo im Dokument sein kann, benötigen Sie eine komplexere Lösung. Du könntest etwas mit versuchen

document.getElementsByTagName("div");

und durchlaufen, um irgendwohin zu gelangen, wo man will.

Wenn Sie viele komplexe DOM-Traversierungen wie diese durchführen, würde ich empfehlen, eine Bibliothek wie jQuery zu suchen.

22
Andy Hume

Zu jedem HTMLElement gibt es ein Attribut "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

Dies wird einfach sein ....... es ist ein reiner Javascript-Code

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

alle diese Lösungen sehen aus wie ein Overkill ... Warum verwenden Sie meine Lösung?

previousElementSibling wird vom IE9 unterstützt

document.addEventListener benötigt eine Polyfill

previousSibling gibt möglicherweise einen Text zurück

Bitte beachten Sie, dass ich mich für das erste/letzte Element entschieden habe, falls die Grenzen überschritten werden. Bei einer Verwendung von RL würde ich es vorziehen, eine Null zurückzugeben.

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

Ich habe es getestet und es hat für mich funktioniert. Das Element, das mich findet, ändert sich entsprechend der Dokumentstruktur, die Sie haben.

<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