Nächstes / vorheriges Element mit JavaScript abrufen?

107

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

Angenommen, ich habe drei <div>s und erhalte einen Verweis auf eine im JavaScript-Code. Ich möchte herausfinden, welche die nächste <div>und welche die vorherige ist.

javascript html dom

— Amr Elgarhy
quelle

29

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

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 durch die Sammlung iterieren, um ihren Index zu finden, und dann offensichtlich -1 = vorher +1 = weiter 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, dass zusätzliche Logik erforderlich ist, um zu überprüfen, ob Sie sich innerhalb der Grenzen befinden, dh, dass Sie sich nicht am Ende oder am Anfang der Sammlung befinden.

Dies bedeutet auch, dass Sie ein Div haben, in dem ein untergeordnetes Div verschachtelt ist. Die nächste div wäre keine Geschwister , aber ein Kind sein, wenn Sie also nur Geschwister als Ziel div auf der gleichen Ebene wollen auf jeden Fall dann verwenden nextSibling die Überprüfung tagName Eigenschaft.

— REA_ANDREW
quelle

1

Nähte gute Lösung, aber wie bekomme ich das nächste Element, wie Sie jetzt geschrieben haben Ich habe die Sammlung und das ausgewählte, können Sie mir mehr helfen?

— Amr Elgarhy

247

Verwenden Sie die Eigenschaften nextSiblingund previousSibling:

<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 welche) 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 browserübergreifenden Überprüfungen sofort für Sie.

— Halbmond frisch
quelle

60

nextElementSibling ist viel nützlicher.

— Trisped

9

Beachten Sie, dass weder nextSibling noch nextElementSibling vollständig browserübergreifend kompatibel sind. Das nextSibling von Firefox gibt Textknoten zurück, während der IE dies nicht tut, und nextElementsibling wird erst im IE9 implementiert.

— Carl Onager

2

Dies funktioniert nicht, wenn die Elemente keine Geschwister sind.

— Rvighne

1

@Kloar: Bei der Frage wurde gefragt, wie das "nächste [div] -Element in HTML" abgerufen werden kann. Der nächste divim Markup befindet sich möglicherweise nicht neben dem Element. Es könnte eine Ebene tiefer oder eine Ebene höher sein.

— Rvighne

1

@leonbloy Ich verstehe deinen Kommentar nicht. Sie sagen im Grunde, if i write dirty HTML, Javascript will act strangewie wäre es mit sauberem und gültigem HTML?

— Dementic

28

Kommt wirklich auf die Gesamtstruktur Ihres Dokuments an.

Wenn Sie haben:

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

Es kann so einfach sein wie das Durchlaufen der Verwendung

mydiv.nextSibling;
mydiv.previousSibling;

Wenn sich das nächste Div jedoch irgendwo im Dokument befinden könnte, benötigen Sie eine komplexere Lösung. Sie könnten etwas mit versuchen

document.getElementsByTagName("div");

und durch diese laufen, um irgendwie dahin zu gelangen, wo du willst.

Wenn Sie viele komplexe DOM-Traversings wie dieses durchführen, würde ich empfehlen, in eine Bibliothek wie jQuery zu schauen.

— Andy Hume
quelle

2

nextSibling () .. sollte nextSibling sein, denke ich

— paul_h

21

Für jedes HTMLElement gibt es das 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/

— user1970894
quelle

Dies schlägt in IE8 fehl (in anderen IE-Versionen nicht überprüft). previousSiblingscheint die browserübergreifende Lösung zu sein.

— Niks

14

Das wird einfach ... es ist ein reiner Javascript-Code

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

— Schlumpf
quelle

6

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

previousElementSibling unterstützt von IE9

document.addEventListener braucht eine Polyfüllung

previousSibling könnte einen Text zurückgeben

Bitte beachten Sie, dass ich mich entschieden habe, das erste / letzte Element zurückzugeben, falls die Grenzen überschritten werden. Bei einer RL-Verwendung 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>

Erweitern Sie das Snippet

— Dementic
quelle

0

Getestet und es hat bei mir funktioniert. Das Element, das mich findet, ändert sich gemäß 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;
}

— Nitin Misra
quelle