Jak uzyskać następny element w HTML za pomocą JavaScript?
Załóżmy, że mam trzy <div>sekundy i otrzymuję odwołanie do jednego w kodzie JavaScript, chcę uzyskać następną<div> a który poprzedni.
Jak uzyskać następny element w HTML za pomocą JavaScript?
Załóżmy, że mam trzy <div>sekundy i otrzymuję odwołanie do jednego w kodzie JavaScript, chcę uzyskać następną<div> a który poprzedni.
Odpowiedzi:
W czystym javascript myślę, że najpierw trzeba by je zestawić w kolekcji.
var divs = document.getElementsByTagName("div");
//divs now contain each and every div element on the page
var selectionDiv = document.getElementById("MySecondDiv");Więc w zasadzie z selectionDiv iteruj przez kolekcję, aby znaleźć jej indeks, a następnie oczywiście -1 = poprzedni +1 = następny w granicach
for(var i = 0; i < divs.length;i++)
{
if(divs[i] == selectionDiv)
{
var previous = divs[i - 1];
var next = divs[i + 1];
}
}Pamiętaj jednak, jak mówię, wymagana byłaby dodatkowa logika, aby sprawdzić, czy znajdujesz się w granicach, tj. Nie znajdujesz się na końcu ani na początku kolekcji.
Będzie to również oznaczać, że masz element div, który ma zagnieżdżony element div. Następny element div nie byłby rodzeństwem, lecz dzieckiem, więc jeśli chcesz mieć tylko rodzeństwo na tym samym poziomie co docelowy element div, zdecydowanie użyj nextSibling, sprawdzając właściwość tagName .
użyj właściwości nextSiblingi previousSibling:
<div id="foo1"></div>
<div id="foo2"></div>
<div id="foo3"></div>
document.getElementById('foo2').nextSibling; // #foo3
document.getElementById('foo2').previousSibling; // #foo1Jednak w niektórych przeglądarkach (zapominam w której) musisz również sprawdzić, czy nie ma białych znaków i węzłów komentarzy:
var div = document.getElementById('foo2');
var nextSibling = div.nextSibling;
while(nextSibling && nextSibling.nodeType != 1) {
nextSibling = nextSibling.nextSibling
}Biblioteki, takie jak jQuery, obsługują wszystkie te kontrole w różnych przeglądarkach.
divw znaczniku może nie sąsiadować z elementem; może to być poziom głębszy lub wyższy.
if i write dirty HTML, Javascript will act strangejak napisać czysty i poprawny kod HTML?
Naprawdę zależy od ogólnej struktury twojego dokumentu.
Jeśli masz:
<div></div>
<div></div>
<div></div>może to być tak proste, jak przechodzenie przez używanie
mydiv.nextSibling;
mydiv.previousSibling;Jeśli jednak „następny” element div może znajdować się w dowolnym miejscu dokumentu, będziesz potrzebować bardziej złożonego rozwiązania. Możesz spróbować czegoś używając
document.getElementsByTagName("div");i biegając przez nie, aby jakoś dostać się tam, gdzie chcesz.
Jeśli wykonujesz wiele skomplikowanych przemierzania DOM, takich jak ten, polecam zajrzeć do biblioteki takiej jak jQuery.
Każdy element HTMLElement ma atrybut „previousElementSibling”.
Dawny:
<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;Na żywo: http://jsfiddle.net/QukKM/
previousSiblingwydaje się być rozwiązaniem dla różnych przeglądarek.
wszystkie te rozwiązania wyglądają na przesadę. Dlaczego warto skorzystać z mojego rozwiązania?
previousElementSibling obsługiwane z IE9
document.addEventListener potrzebuje wypełnienia
previousSibling może zwrócić tekst
Zwróć uwagę, że zdecydowałem się zwrócić pierwszy / ostatni element w przypadku przekroczenia granic. W przypadku korzystania z RL wolałbym, aby zwracała wartość 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>Przetestowałem to i u mnie zadziałało. Element znajdujący mnie zmienia się zgodnie ze strukturą dokumentu, którą masz.
<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;
}