[javascript] JavaScript를 사용하여 다음 / 이전 요소를 가져 오시겠습니까?

Program / 글쓴이

JavaScript를 사용하여 HTML에서 다음 요소를 얻으려면 어떻게합니까?

세 개의 <div>s가 있고 JavaScript 코드에서 하나에 대한 참조 가 있다고 가정 하면 다음 <div>중 어느 것이 이전인지 얻고 싶습니다 .

답변

순수한 자바 스크립트에서 내 생각은 먼저 컬렉션 ​​내에서 수집해야한다는 것입니다. 

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 속성을 .

답변

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;

그러나 ‘next’div가 문서의 어느 곳에 나있을 수 있다면 더 복잡한 솔루션이 필요합니다. 다음을 사용하여 시도해 볼 수 있습니다.

document.getElementsByTagName("div");

어떻게 든 원하는 곳에 도달하기 위해 이것들을 통해 실행합니다.

이와 같이 복잡한 DOM 탐색을 많이 수행하는 경우 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/

답변

이것은 쉬울 것입니다 … 순수한 자바 스크립트 코드

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

답변

이 모든 솔루션은 과잉처럼 보입니다. 내 솔루션을 사용하는 이유는 무엇입니까?

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>

스 니펫 확장

답변

그것을 테스트했고 그것은 나를 위해 일했습니다. 나를 찾는 요소는 보유한 문서 구조에 따라 변경됩니다.

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