Отримати наступний / попередній елемент за допомогою JavaScript?

107

Як отримати наступний елемент у HTML за допомогою JavaScript?

Припустимо, у мене є три <div>s, і я отримую посилання на одне в коді JavaScript, я хочу отримати наступне, <div>а яке - попереднє.

javascript html dom

— Амр Елгархі
джерело

29

Ну і в чистому JavaScript я думаю, що спершу вам доведеться зібрати їх у колекції.

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

Тож в основному з selectionDiv перегляньте колекцію, щоб знайти її індекс, і тоді очевидно -1 = попередній +1 = наступний в межах

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

Будьте в курсі, хоча, як я кажу, потрібна додаткова логіка, щоб перевірити, чи ви знаходитесь в межах, тобто ви не в кінці або початку колекції.

Це також буде означати, що скажіть, що у вас є діва, у якого вкладена дитина. Наступний div не буде рідним братом, а дитиною, тому, якщо ви хочете лише брати і сестри на тому ж рівні, що і цільовий div, тоді обов'язково використовуйте nextSibling, перевіряючи властивість tagName .

— REA_ANDREW
джерело

1

добре рішення, але як отримати наступний елемент, як ви писали зараз, у мене є колекція та вибраний, чи можете ви мені більше допомогти?

— Amr Elgarhy

248

використовувати nextSiblingіpreviousSibling властивості:

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

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

Однак у деяких браузерах (я забуваю, які) вам також потрібно перевірити наявність пробілів та вузлів коментарів:

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

Бібліотеки, такі як jQuery, обробляють усі ці крос-браузерні чеки для вас поза коробкою.

— Півмісяць свіжий
джерело

60

nextElementSibling набагато корисніше.

— Trisped

9

Зауважте, що ні nextSibling, ні nextElementSibling не повністю сумісні з браузером. НаступнийSibling Firefox повертає текстові вузли, поки IE не працює та nextElementsibling не реалізується до IE9.

— Карл Онагер

2

Це не спрацює, якщо елементи не є побратимами.

— rvighne

1

@Kloar: Питання задало, як отримати "наступний [div] елемент у html." Наступний divу розмітці може бути не сусідній з елементом; це може бути рівень глибший або рівень вище.

— rvighne

1

@leonbloy Я не розумію твій коментар. Ви в основному говорите, if i write dirty HTML, Javascript will act strangeяк щодо написання чистого та дійсного html?

— Дементік

28

Дійсно залежить від загальної структури вашого документа.

Якщо у вас є:

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

це може бути таким же простим, як проїзд через використання

mydiv.nextSibling;
mydiv.previousSibling;

Однак якщо розділ "наступний" може бути десь у документі, вам знадобиться більш складне рішення. Ви можете спробувати щось, використовуючи

document.getElementsByTagName("div");

і перебігаючи ці, щоб дістатися куди хочеш.

Якщо ви робите безліч складних DOM-маршрутів, таких як цей, я рекомендую заглянути в бібліотеку, наприклад jQuery.

— Енді Юм
джерело

2

nextSibling () .. повинен бути nextSibling, я думаю

— paul_h

21

На кожному HTMLElement є "атрибут", "попереднєElementSibling".

Наприклад:

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

У прямому ефірі: http://jsfiddle.net/QukKM/

— user1970894
джерело

Це не вдається в IE8 (не перевіряли інші версії IE). previousSiblingсхоже, це рішення для крос-браузера.

— Нікс

14

Це буде легко ... це чистий код JavaScript

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

— smurf
джерело

6

всі ці рішення виглядають як надмірність. Навіщо використовувати моє рішення?

previousElementSibling підтримується від IE9

document.addEventListener потрібен поліфіл

previousSibling може повернути текст

Зауважте, що я вирішив повернути перший / останній елемент у випадку порушення меж. У використанні RL я вважаю за краще повернути нуль.

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>

Розгорніть фрагмент

— Дементичний
джерело

0

Випробував це, і він працював на мене. Елемент, що знаходить мене, змінюється відповідно до вашої структури документа.

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

— Нітін Місра
джерело