html - 使用JavaScript获取下一个/上一个元素?

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

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

Amr Elgarhy asked 2019-08-13T23:06:13Z
7个解决方案
221 votes

使用previousSiblingpreviousSibling属性:

<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 answered 2019-08-13T23:07:28Z
26 votes

在纯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 answered 2019-08-13T23:06:49Z
22 votes

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

如果你有:

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

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

mydiv.nextSibling;
mydiv.previousSibling;

但是,如果&#39; next&#39; div可以在文档中的任何位置,您需要一个更复杂的解决方案。 你可以试试用

document.getElementsByTagName("div");

并通过这些以某种方式到达你想要的地方。

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

Andy Hume answered 2019-08-13T23:08:23Z
19 votes

每个HTMLElement都有一个属性,&#34; previousElementSibling&#34;。

例如:

<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 answered 2019-08-13T23:08:57Z
14 votes

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

    <script>
           alert(document.getElementById("someElement").previousElementSibling.innerHTML);
    </script>
smurf answered 2019-08-13T23:09:21Z
2 votes

所有这些解决方案看起来都有点矫枉过正。为何使用我的解决方案

IE9支持<div id="parent"> <div id="child1"></div> <div id="child2"></div> </div>

<div id="parent"> <div id="child1"></div> <div id="child2"></div> </div>需要填充物

<div id="parent"> <div id="child1"></div> <div id="child2"></div> </div>可能会返回一个文本

请注意我选择返回第一个/最后一个元素,以防边界被破坏。在RL使用中,我希望它返回null。

<div id="parent">
  <div id="child1"></div>
  <div id="child2"></div>
</div>
<div id="parent">
  <div id="child1"></div>
  <div id="child2"></div>
</div>

Dementic answered 2019-08-13T23:10:24Z
0 votes

测试它,它对我有用。 找到我的元素根据您拥有的文档结构进行更改。

<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;
}
Nitin Misra answered 2019-08-13T23:10:49Z
translate from https://stackoverflow.com:/questions/574904/get-next-previous-element-using-javascript