자바스크립트를 이용하여 다음 / 이전 요소를 얻으시겠습니까?
자바스크립트를 사용하여 HTML의 다음 요소를 얻으려면 어떻게 해야 합니까?
내게 3개가 있다고 치자.<div>s 그리고 자바스크립트 코드에서 하나를 참조받았는데, 어떤 것이 다음 것인지 알고 싶습니다.<div>그리고 그 이전의 것입니다.
및 속성을 사용합니다.
<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와 같은 라이브러리는 즉시 사용자를 위해 이러한 모든 크로스 브라우저 검사를 처리합니다.
아주 간단합니다.대신 이 방법을 사용해 보십시오.
let myReferenceDiv = document.getElementById('mydiv');
let prev = myReferenceDiv.previousElementSibling;
let next = myReferenceDiv.nextElementSibling;
문서의 전체적인 구조에 따라 다릅니다.
있는 경우:
<div></div>
<div></div>
<div></div>
사용하는 것만큼 간단할 수도 있습니다.
mydiv.nextSibling;
mydiv.previousSibling;
그러나 '다음' 디바가 문서의 어디에나 있을 수 있다면 좀 더 복잡한 해결책이 필요할 것입니다.당신은 당신을 이용해서 무언가를 시도할 수 있습니다.
document.getElementsByTagName("div");
어떻게든 당신이 원하는 곳으로 가기 위해 이것들을 뛰어다닙니다.
만약 당신이 이와 같이 복잡한 DOM 횡단을 많이 한다면 jQuery와 같은 라이브러리를 알아보는 것을 추천합니다.
순수 자바스크립트로 표현하자면, 먼저 컬렉션 안에서 그것들을 대조해야 한다는 것이 제 생각입니다.
var divs = document.getElementsByTagName("div");
//divs now contain each and every div element on the page
var selectionDiv = document.getElementById("MySecondDiv");
따라서 기본적으로 selectionDivate 컬렉션을 통해 인덱스를 찾고 경계 내에서 -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와 같은 수준의 형제자매만 원할 경우 nextSibling을 사용하여 tagName 속성을 확인합니다.
모든 HTML 요소에는 "previousElementsSibling"이라는 속성이 있습니다.
예:
<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>
이 모든 해결책들은 오버킬처럼 보입니다.왜 내 솔루션을 사용합니까?
previousElementSiblingIE9에서 지원됨
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>다음 ElementSibling 또는 이전 ElementSibling 속성을 사용할 수 있습니다.
<div>
<span id="elem-1">
span
</span>
</div>
<div data-id="15">
Parent Sibling
</div>
const sp = document.querySelector('#elem-1');
let sibling_data_id = sp.parentNode.nextElementSibling.dataset.id;
console.log(sibling_data_id); // 15
시험해봤는데 효과가 있었어요나를 찾는 요소는 당신이 가지고 있는 문서 구조에 따라 바뀝니다.
<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;
}
아주 간단합니다.
var element = querySelector("div")
var nextelement = element.parentElement.querySelector("div+div")
다음은 브라우저가 지원하는 https://caniuse.com/queryselector 입니다.
언급URL : https://stackoverflow.com/questions/574904/get-next-previous-element-using-javascript
'programing' 카테고리의 다른 글
| 브라우저에서 실행되는 자바스크립트 샌드박스가 가능합니까? (0) | 2023.09.26 |
|---|---|
| AngularJS에서 $timeout을 사용하여 매개 변수로 함수를 실행하는 방법은? (0) | 2023.09.26 |
| WooCommerce 관리자 주문 목록의 특정 메타 필드별로 주문 필터링 (0) | 2023.09.26 |
| 디렉토리 가져오기를 위한 영구 테이블과 임시 테이블 (0) | 2023.09.26 |
| WHERE 조항의 json 컬럼을 조건으로 사용하는 방법 (0) | 2023.09.26 |