Pobrać następny / poprzedni element za pomocą JavaScript?

107

Jak uzyskać następny element w HTML za pomocą JavaScript?

Załóżmy, że mam trzy <div>sekundy i otrzymuję odwołanie do jednego w kodzie JavaScript, chcę uzyskać następną<div> a który poprzedni.

javascript html dom Amr Elgarhy
źródło

29

W czystym javascript myślę, że najpierw trzeba by je zestawić w kolekcji.

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

Więc w zasadzie z selectionDiv iteruj przez kolekcję, aby znaleźć jej indeks, a następnie oczywiście -1 = poprzedni +1 = następny w granicach

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

Pamiętaj jednak, jak mówię, wymagana byłaby dodatkowa logika, aby sprawdzić, czy znajdujesz się w granicach, tj. Nie znajdujesz się na końcu ani na początku kolekcji.

Będzie to również oznaczać, że masz element div, który ma zagnieżdżony element div. Następny element div nie byłby rodzeństwem, lecz dzieckiem, więc jeśli chcesz mieć tylko rodzeństwo na tym samym poziomie co docelowy element div, zdecydowanie użyj nextSibling, sprawdzając właściwość tagName .

REA_ANDREW
źródło

1

szwy dobre rozwiązanie ale jak zdobyć kolejny element tak jak pisałeś teraz mam kolekcję i wybraną, czy możesz mi bardziej pomóc?

Amr Elgarhy

248

użyj właściwości nextSiblingi previousSibling:

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

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

Jednak w niektórych przeglądarkach (zapominam w której) musisz również sprawdzić, czy nie ma białych znaków i węzłów komentarzy:

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

Biblioteki, takie jak jQuery, obsługują wszystkie te kontrole w różnych przeglądarkach.

Crescent Fresh
źródło

60

nextElementSibling jest znacznie bardziej przydatny.

Trisped

9

Zauważ, że ani nextSibling, ani nextElementSibling nie są w pełni kompatybilne z różnymi przeglądarkami. Firefox's nextSibling zwraca węzły tekstowe, podczas gdy IE nie, a nextElementsibling nie jest zaimplementowany do IE9.

Carl Onager

2

To nie zadziała, jeśli elementy nie są rodzeństwem.

rvighne

1

@Kloar: Pytanie dotyczyło sposobu uzyskania „następnego elementu [div] w html”. Następny divw znaczniku może nie sąsiadować z elementem; może to być poziom głębszy lub wyższy.

rvighne

1

@leonbloy, nie rozumiem twojego komentarza. po prostu mówisz, if i write dirty HTML, Javascript will act strangejak napisać czysty i poprawny kod HTML?

Dementic

28

Naprawdę zależy od ogólnej struktury twojego dokumentu.

Jeśli masz:

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

może to być tak proste, jak przechodzenie przez używanie

mydiv.nextSibling;
mydiv.previousSibling;

Jeśli jednak „następny” element div może znajdować się w dowolnym miejscu dokumentu, będziesz potrzebować bardziej złożonego rozwiązania. Możesz spróbować czegoś używając

document.getElementsByTagName("div");

i biegając przez nie, aby jakoś dostać się tam, gdzie chcesz.

Jeśli wykonujesz wiele skomplikowanych przemierzania DOM, takich jak ten, polecam zajrzeć do biblioteki takiej jak jQuery.

Andy Hume
źródło

2

nextSibling () .. powinno być następneSibling, myślę, że

paul_h

21

Każdy element HTMLElement ma atrybut „previousElementSibling”.

Dawny:

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

Na żywo: http://jsfiddle.net/QukKM/

user1970894
źródło

To się nie powiedzie w IE8 (nie sprawdzono w innych wersjach IE). previousSiblingwydaje się być rozwiązaniem dla różnych przeglądarek.

Niks

14

To będzie łatwe ... to czysty kod javascript

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

smerfa
źródło

6

wszystkie te rozwiązania wyglądają na przesadę. Dlaczego warto skorzystać z mojego rozwiązania?

previousElementSibling obsługiwane z IE9

document.addEventListener potrzebuje wypełnienia

previousSibling może zwrócić tekst

Zwróć uwagę, że zdecydowałem się zwrócić pierwszy / ostatni element w przypadku przekroczenia granic. W przypadku korzystania z RL wolałbym, aby zwracała wartość 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>

Rozwiń fragment

Demencyjny
źródło

0

Przetestowałem to i u mnie zadziałało. Element znajdujący mnie zmienia się zgodnie ze strukturą dokumentu, którą masz.

<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
źródło

Pobrać następny / poprzedni element za pomocą JavaScript?

Odpowiedzi: