Làm cách nào để lấy phần tử tiếp theo trong HTML bằng JavaScript?
Giả sử tôi có ba <div>s và tôi nhận được một tham chiếu đến một trong mã JavaScript, tôi muốn lấy cái nào tiếp theo <div>và cái nào trước đó.
Làm cách nào để lấy phần tử tiếp theo trong HTML bằng JavaScript?
Giả sử tôi có ba <div>s và tôi nhận được một tham chiếu đến một trong mã JavaScript, tôi muốn lấy cái nào tiếp theo <div>và cái nào trước đó.
Câu trả lời:
Trong javascript thuần túy, suy nghĩ của tôi là trước tiên bạn sẽ phải đối chiếu chúng trong một bộ sưu tập.
var divs = document.getElementsByTagName("div");
//divs now contain each and every div element on the page
var selectionDiv = document.getElementById("MySecondDiv");Vì vậy, về cơ bản với selectDiv, hãy lặp lại bộ sưu tập để tìm chỉ mục của nó và sau đó rõ ràng là -1 = trước +1 = tiếp theo trong giới hạn
for(var i = 0; i < divs.length;i++)
{
if(divs[i] == selectionDiv)
{
var previous = divs[i - 1];
var next = divs[i + 1];
}
}Vui lòng lưu ý mặc dù như tôi nói rằng cần có thêm logic để kiểm tra xem bạn có đang ở trong giới hạn hay không, tức là bạn không ở cuối hoặc bắt đầu bộ sưu tập.
Điều này cũng có nghĩa là bạn có một div có một div con được lồng vào nhau. Div tiếp theo sẽ không phải là anh chị em mà là con, Vì vậy, nếu bạn chỉ muốn anh chị em cùng cấp với div đích thì chắc chắn sử dụng nextSibling để kiểm tra thuộc tính tagName .
sử dụng các thuộc tính nextSiblingvà previousSibling:
<div id="foo1"></div>
<div id="foo2"></div>
<div id="foo3"></div>
document.getElementById('foo2').nextSibling; // #foo3
document.getElementById('foo2').previousSibling; // #foo1Tuy nhiên, trong một số trình duyệt (tôi quên mất), bạn cũng cần phải kiểm tra khoảng trắng và các nút nhận xét:
var div = document.getElementById('foo2');
var nextSibling = div.nextSibling;
while(nextSibling && nextSibling.nodeType != 1) {
nextSibling = nextSibling.nextSibling
}Các thư viện như jQuery xử lý tất cả các kiểm tra trình duyệt chéo này cho bạn.
divtrong đánh dấu có thể không liền kề với phần tử; nó có thể là một cấp độ sâu hơn hoặc một cấp độ cao hơn.
if i write dirty HTML, Javascript will act strangevề cách viết html sạch sẽ và hợp lệ?
Thực sự phụ thuộc vào cấu trúc tổng thể của tài liệu của bạn.
Nếu bạn có:
<div></div>
<div></div>
<div></div>nó có thể đơn giản như chuyển qua sử dụng
mydiv.nextSibling;
mydiv.previousSibling;Tuy nhiên, nếu div 'tiếp theo' có thể nằm ở bất kỳ đâu trong tài liệu, bạn sẽ cần một giải pháp phức tạp hơn. Bạn có thể thử một cái gì đó bằng cách sử dụng
document.getElementsByTagName("div");và chạy qua những thứ này để đến được nơi bạn muốn bằng cách nào đó.
Nếu bạn đang thực hiện nhiều thao tác duyệt DOM phức tạp như thế này, tôi khuyên bạn nên xem xét một thư viện như jQuery.
Có một thuộc tính trên mỗi HTMLElement, "beforeElementSibling".
Ví dụ:
<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;Trực tiếp: http://jsfiddle.net/QukKM/
previousSiblingdường như là giải pháp trình duyệt chéo.
tất cả các giải pháp này trông giống như quá mức cần thiết. Tại sao sử dụng giải pháp của tôi?
previousElementSibling được hỗ trợ từ IE9
document.addEventListener cần một polyfill
previousSibling có thể trả lại một văn bản
Xin lưu ý rằng tôi đã chọn trả lại phần tử đầu tiên / cuối cùng trong trường hợp ranh giới bị phá vỡ. Trong cách sử dụng RL, tôi muốn nó trả về giá trị 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>Đã thử nghiệm nó và nó làm việc cho tôi. Phần tử tìm thấy tôi thay đổi theo cấu trúc tài liệu mà bạn có.
<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;
}