Dapatkan elemen berikutnya / sebelumnya menggunakan JavaScript?

107

Bagaimana cara mendapatkan elemen berikutnya dalam HTML menggunakan JavaScript?

Misalkan saya memiliki tiga <div>s dan saya mendapatkan referensi ke satu dalam kode JavaScript, saya ingin mendapatkan mana yang berikutnya <div>dan yang sebelumnya.

javascript html dom Amr Elgarhy
sumber

Jawaban:

29

Dalam javascript murni, pemikiran saya adalah Anda harus menyusunnya terlebih dahulu di dalam sebuah koleksi. 

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

Jadi pada dasarnya dengan selectionDiv melakukan iterasi melalui koleksi untuk menemukan indeksnya, dan kemudian jelas -1 = sebelumnya +1 = berikutnya dalam batas

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

Perlu diketahui meskipun seperti yang saya katakan bahwa logika tambahan akan diperlukan untuk memeriksa bahwa Anda berada dalam batas, yaitu Anda tidak berada di akhir atau awal pengumpulan.

Ini juga berarti bahwa Anda memiliki div yang memiliki div turunan. Div berikutnya tidak akan menjadi saudara tetapi anak, Jadi jika Anda hanya ingin saudara pada tingkat yang sama dengan div target, gunakan nextSibling untuk memeriksa properti tagName .

REA_ANDREW
sumber
1
jahitan solusi yang baik tetapi bagaimana mendapatkan elemen berikutnya, seperti yang Anda tulis sekarang saya memiliki koleksi dan yang dipilih, dapatkah Anda membantu saya lebih banyak?
Amr Elgarhy
248

gunakan nextSiblingdan previousSiblingproperti:

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

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

Namun di beberapa browser (saya lupa yang mana) Anda juga perlu memeriksa spasi dan node komentar:

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

Perpustakaan seperti jQuery menangani semua pemeriksaan lintas-browser ini untuk Anda di luar kotak.

Crescent Fresh
sumber
60
nextElementSibling jauh lebih berguna.
Dicabut
9
Perhatikan bahwa baik nextSibling maupun nextElementSibling tidak sepenuhnya kompatibel lintas browser. NextSibling Firefox mengembalikan node teks sementara IE tidak dan nextElementsibling tidak diimplementasikan hingga IE9.
Carl Onager
2
Ini tidak akan berfungsi jika elemen bukan saudara kandung.
rvighne
1
@Kloar: Pertanyaannya menanyakan bagaimana mendapatkan elemen "berikutnya [div] dalam html." divMarkup berikutnya mungkin tidak bersebelahan dengan elemen; mungkin level yang lebih dalam atau level yang lebih tinggi.
rvighne
1
@leonbloy saya tidak mengerti komentar Anda. Anda pada dasarnya mengatakan if i write dirty HTML, Javascript will act strangebagaimana menulis html yang bersih dan valid?
Dementik
28

Sangat tergantung pada keseluruhan struktur dokumen Anda.

Jika Anda memiliki:

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

itu mungkin sesederhana melintasi melalui penggunaan

mydiv.nextSibling;
mydiv.previousSibling;

Namun, jika div 'next' bisa berada di mana saja dalam dokumen, Anda memerlukan solusi yang lebih kompleks. Anda bisa mencoba sesuatu menggunakan

document.getElementsByTagName("div");

dan menjalankan ini untuk mendapatkan tempat yang Anda inginkan.

Jika Anda melakukan banyak penjelajahan DOM yang kompleks seperti ini, saya akan merekomendasikan untuk melihat ke perpustakaan seperti jQuery.

Andy Hume
sumber
2
nextSibling () .. harus nextSibling, saya pikir
paul_h
21

Ada atribut di setiap HTMLElement, "beforeElementSibling".

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;

Langsung: http://jsfiddle.net/QukKM/

pengguna1970894
sumber
Ini gagal di IE8 (belum diperiksa di versi IE lainnya). previousSiblingtampaknya menjadi solusi lintas browser.
Niks
14

Ini akan mudah ... ini adalah kode javascript murni

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

semua solusi ini terlihat berlebihan. Mengapa menggunakan solusi saya?

previousElementSibling didukung dari IE9

document.addEventListener membutuhkan polyfill

previousSibling mungkin mengembalikan teks

Harap dicatat saya telah memilih untuk mengembalikan elemen pertama / terakhir jika batas rusak. Dalam penggunaan RL, saya lebih suka mengembalikan 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>
Luaskan cuplikan

Dementik
sumber
0

Mengujinya dan berhasil untuk saya. Elemen menemukan saya berubah sesuai struktur dokumen yang Anda miliki.

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