使用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属性。
使用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这样的库为您处理所有这些跨浏览器检查。
真的取决于文档的整体结构。
如果你有：
<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; }
- <input type = button> vs <button>
- AngularJS的策略，以防止一个类的无风格的内容
- 如何创build一个空的，非空的jQuery对象准备好追加？
- jquery – 从一个非常大的表中删除所有行的最快方法
- createElement比innerHTML的优点？
- jQuery中width，innerWidth和outerWidth，height，innerHeight和outerHeight的区别是什么？
- document.addEventListener和window.addEventListener之间的区别？
- 如何replaceAngularJS指令链接函数中的元素？
- document.URL和location.href之间的区别
