使用JavaScript获取下一个/上一个元素？

Question

如何使用JavaScript获取HTML中的下一个元素？

假设我有三个<div>s,我在JavaScript代码中得到一个引用,我想得到的是下一个<div>,哪个是前一个.

Answer 1

使用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这样的库可以为您提供开箱即用的所有这些跨浏览器检查.

Answer 2

在纯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属性.

Answer 3

真的取决于您的文档的整体结构.

如果你有:

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

它可能就像穿越使用一样简单

mydiv.nextSibling;
mydiv.previousSibling;

但是,如果"下一个"div可以在文档中的任何位置,则需要更复杂的解决方案.你可以试试用

document.getElementsByTagName("div");

并通过这些来到达你想要的地方.

如果您正在进行大量复杂的DOM遍历,我会建议您查看jQuery等库.

Answer 4

每个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/

Answer 5

这将很容易......它是一个纯粹的JavaScript代码

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

Answer 6

它很简单。试试这个：

let myReferenceDiv = document.getElementById('mydiv');
let prev = myReferenceDiv.previousElementSibling;
let next = myReferenceDiv.nextElementSibling;

Answer 7

所有这些解决方案看起来都有些矫枉过正。为什么要使用我的解决方案？

previousElementSibling 支持 IE9

document.addEventListener 需要一个 polyfill

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>

Answer 8

您可以使用nextElementSibling或previousElementSibling属性

<div>
    <span id="elem-1">
        span
    </span>
</div>
<div data-id="15">
    Parent Sibling
</div>


const sp = document.querySelector('#elem-1');
let sibling_data_id = sp.parentNode.nextElementSibling.dataset.id;
console.log(sibling_data_id); // 15