Получить следующий / предыдущий элемент с помощью 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. Следующий div будет не родственным, а дочерним, поэтому, если вам нужны только братья и сестры на том же уровне, что и целевой div, тогда обязательно используйте nextSibling для проверки свойства tagName .

— REA_ANDREW
источник

1

швы хорошее решение, но как получить следующий элемент, как вы написали, теперь у меня есть коллекция и выбранный, вы можете мне больше помочь?

— Амр Элгархи,

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, обрабатывают все эти кроссбраузерные проверки за вас из коробки.

— Crescent Fresh
источник

61

nextElementSibling гораздо полезнее.

— Trisped

9

Обратите внимание, что ни nextSibling, ни nextElementSibling не являются полностью кроссбраузерными. NextSibling Firefox возвращает текстовые узлы, а IE - нет, а nextElementsibling не реализован до IE9.

— Carl Onager

2

Это не сработает, если элементы не являются братьями и сестрами.

— rvighne

1

@Kloar: Был задан вопрос, как получить «следующий элемент [div] в html». Следующее divв разметке может не примыкать к элементу; это может быть уровень глубже или уровень выше.

— rvighne

1

@leonbloy, я не понимаю ваш комментарий. Вы в основном говорите, if i write dirty HTML, Javascript will act strangeкак насчет написания чистого и правильного HTML?

— Dementic

28

Действительно зависит от общей структуры вашего документа.

Если у вас есть:

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

это может быть так же просто, как переход с помощью

mydiv.nextSibling;
mydiv.previousSibling;

Однако, если «следующий» div может быть где угодно в документе, вам понадобится более сложное решение. Вы можете попробовать что-нибудь, используя

document.getElementsByTagName("div");

и пробежаться по ним, чтобы как-то добраться туда, куда вы хотите.

Если вы выполняете много сложного обхода DOM, такого как этот, я бы порекомендовал изучить библиотеку, такую как jQuery.

— Энди Хьюм
источник

2

nextSibling () .. должен быть nextSibling, я думаю

— paul_h

21

На каждом элементе HTMLElement есть атрибут "previousElementSibling".

Пример:

<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кажется кроссбраузерным решением.

— Niks

14

Это будет легко ... это чистый код javascript

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

— смурф
источник

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

— Нитин Мишра
источник