web-dev-qa-db-ja.com

JavaScriptを使用して次/前の要素を取得しますか？

JavaScriptを使用してHTMLの次の要素を取得するにはどうすればよいですか？

3つの<div>があり、JavaScriptコード内の1つへの参照を取得した場合、次の<div>と前のいずれかを取得したいとします。

javascripthtmldom
96
Amr Elgarhy

まあ、純粋な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と同じレベルの兄弟だけが必要な場合は、tagNameプロパティをチェックするnextSiblingを確実に使用します。

26
REA_ANDREW

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などのライブラリは、これらのクロスブラウザチェックをすべてすぐに処理します。

228
Crescent Fresh

文書の全体的な構造に本当に依存します。

あなたが持っている場合：

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

を使用してトラバースするのと同じくらい簡単かもしれません

mydiv.nextSibling;
mydiv.previousSibling;

ただし、「次の」divがドキュメント内のどこかにある場合は、より複雑なソリューションが必要になります。を使用して何かを試すことができます

document.getElementsByTagName("div");

そして、これらを実行して、どういうわけか目的の場所を取得します。

このような複雑なDOMトラバースを多数行う場合は、jQueryなどのライブラリを調べることをお勧めします。

23
Andy Hume

すべての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/

19
user1970894

これは簡単です...その純粋なJavaScriptコード

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

これらのソリューションはすべて過剰に見えます。ソリューションを使用する理由

previousElementSibling IE9からサポート

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>
2
Dementic

それをテストし、それは私のために働いた。私を見つける要素は、あなたが持っているドキュメント構造によって変わります。

<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;
}
0
Nitin Misra