使用Javascript获取下一个/上一个元素

如何获得html中使用javascript的下一个元素? 假设我有三个div ,我得到一个在js代码中的引用,我想得到哪个是下一个div,哪个是前一个div。

那么在纯粹的JavaScript我的想法是,你将首先必须在收集内核对他们。

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

所以基本上用selectionDiv遍历集合来find它的索引,然后在bounds中明显是-1 = previous +1 = next

 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属性。

使用nextSiblingpreviousSibling属性:

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

真的取决于文档的整体结构。

如果你有:

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

它可能像遍历使用一样简单

 mydiv.nextSibling; mydiv.previousSibling; 

但是,如果“下一个”div可能在文档中的任何位置,则需要更复杂的解决scheme。 你可以尝试一些使用

 document.getElementsByTagName("div"); 

并通过这些运行得到你想要的地方。

如果你正在做很多像这样复杂的DOM遍历,我会build议看一下像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> 

所有这些解决scheme看起来像一个矫枉过正。 为什么用我的解决scheme

IE9支持previousElementSibling

document.addEventListener需要一个polyfill

previousSibling可能会返回一个文本

如何简单的如下:

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

请注意我已经select返回第一个/最后一个元素,以防止边界被破坏。 在RL的用法,我宁愿它返回一个null。

看到它在这里工作: JSFiddle

经过testing,它为我工作。 find我的元素会根据您拥有的文档结构进行更改。

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