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

小开

最佳答案

在纯 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 检查 标签名属性。

小开

确实取决于文档的整体结构。

如果你有:

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

它可能像遍历使用

mydiv.nextSibling;
mydiv.previousSibling;

但是，如果“ next”div 可能位于文档中的任何位置，则需要更复杂的解决方案。你可以试试

document.getElementsByTagName("div");

然后通过这些来达到你的目的。

如果您正在进行大量这样的复杂 DOM 遍历，我建议您查看一个类似 jQuery 的库。

小开

使用 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 这样的库可以立即为您处理所有这些跨浏览器检查。

小开

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

小开

这很简单。它是一个纯粹的 javascript 代码

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

小开

对它进行了测试，它对我很有效。找到我的元素会根据您所拥有的文档结构进行更改。

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

小开

所有这些解决方案看起来都太过了。为什么要用我的方法？

IE9支持 previousElementSibling

document.addEventListener需要填充

previousSibling可能会返回一条文本

请注意，我已经选择返回第一个/最后一个元素，以防边界被打破。在 RL 用法中，我希望它返回一个 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>

小开

很简单

var element = querySelector("div")
var nextelement = element.parentElement.querySelector("div+div")

这是支持 https://caniuse.com/queryselector的浏览器

小开

很简单，试试这个:

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

小开

可以使用 兄弟姐妹或 前情提要属性

<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