JavaScript kullanarak HTML'deki bir sonraki öğeyi nasıl edinebilirim?
Diyelim ki üç <div>tane var ve JavaScript kodunda bir referans alıyorum, hangisinin sonraki <div>ve hangisinin önceki olduğunu öğrenmek istiyorum .
JavaScript kullanarak HTML'deki bir sonraki öğeyi nasıl edinebilirim?
Diyelim ki üç <div>tane var ve JavaScript kodunda bir referans alıyorum, hangisinin sonraki <div>ve hangisinin önceki olduğunu öğrenmek istiyorum .
Yanıtlar:
Tamamen javascript'te benim düşünceme göre, önce onları bir koleksiyon içinde harmanlamanız gerekir.
var divs = document.getElementsByTagName("div");
//divs now contain each and every div element on the page
var selectionDiv = document.getElementById("MySecondDiv");Bu nedenle, temelde selectionDiv ile dizinini bulmak için koleksiyon boyunca yineleyin ve sonra açıkça -1 = önceki +1 = sınırlar içinde sonraki
for(var i = 0; i < divs.length;i++)
{
if(divs[i] == selectionDiv)
{
var previous = divs[i - 1];
var next = divs[i + 1];
}
}Lütfen söylediğim gibi, sınırlar içinde olup olmadığınızı kontrol etmek için ekstra mantık gerekeceğini unutmayın, yani koleksiyonun sonunda veya başında olmadığınızı.
Bu aynı zamanda, iç içe geçmiş bir çocuğu olan bir div'iniz olduğu anlamına gelir. Sonraki div, kardeş değil, çocuk olacaktır, Bu nedenle, yalnızca hedef div ile aynı düzeydeki kardeşleri istiyorsanız, tagName özelliğini kontrol eden kesinlikle nextSibling'i kullanın .
nextSiblingve previousSiblingözelliklerini kullanın :
<div id="foo1"></div>
<div id="foo2"></div>
<div id="foo3"></div>
document.getElementById('foo2').nextSibling; // #foo3
document.getElementById('foo2').previousSibling; // #foo1Ancak bazı tarayıcılarda (hangisini unuttum) boşluk ve yorum düğümlerini de kontrol etmeniz gerekir:
var div = document.getElementById('foo2');
var nextSibling = div.nextSibling;
while(nextSibling && nextSibling.nodeType != 1) {
nextSibling = nextSibling.nextSibling
}JQuery gibi kitaplıklar, tüm bu tarayıcılar arası kontrolleri kutudan çıkarır çıkarmaz sizin için halleder.
divBiçimlendirmedeki sonraki , öğeye bitişik olmayabilir; daha derin veya daha yüksek bir seviye olabilir.
if i write dirty HTML, Javascript will act strangetemiz ve geçerli html yazmaya ne dersiniz?
Gerçekten belgenizin genel yapısına bağlıdır.
Eğer varsa:
<div></div>
<div></div>
<div></div>kullanarak geçiş yapmak kadar basit olabilir
mydiv.nextSibling;
mydiv.previousSibling;Ancak, 'sonraki' div, belgenin herhangi bir yerinde olabilirse, daha karmaşık bir çözüme ihtiyacınız olacaktır. Kullanarak bir şey deneyebilirsin
document.getElementsByTagName("div");ve bir şekilde istediğiniz yere ulaşmak için bunlardan geçerek.
Bunun gibi çok sayıda karmaşık DOM geçişi yapıyorsanız, jQuery gibi bir kitaplığa bakmanızı tavsiye ederim.
Her HTMLElement üzerinde "previousElementSibling" adında bir öznitelik vardır.
Ör:
<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;Canlı: http://jsfiddle.net/QukKM/
previousSiblingçapraz tarayıcı çözümü gibi görünüyor.
tüm bu çözümler abartılı gibi görünüyor. Çözümümü neden kullanmalıyım?
previousElementSibling IE9'dan destekleniyor
document.addEventListener çoklu dolguya ihtiyacı var
previousSibling bir metin döndürebilir
Sınırların bozulması durumunda ilk / son öğeyi döndürmeyi seçtiğimi lütfen unutmayın. Bir RL kullanımında, bir null döndürmesini tercih ederim.
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>Test ettim ve benim için çalıştı. Beni bulan öğe, sahip olduğunuz belge yapısına göre değişir.
<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;
}