ฉันจะรับองค์ประกอบถัดไปใน HTML โดยใช้ JavaScript ได้อย่างไร
สมมติว่าฉันมีสาม<div>วินาทีและฉันได้รับการอ้างอิงถึงหนึ่งในโค้ด JavaScript ฉันต้องการรับอันต่อไป<div>และอันไหนก่อนหน้านี้
ฉันจะรับองค์ประกอบถัดไปใน HTML โดยใช้ JavaScript ได้อย่างไร
สมมติว่าฉันมีสาม<div>วินาทีและฉันได้รับการอ้างอิงถึงหนึ่งในโค้ด 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ในมาร์กอัปอาจไม่อยู่ติดกับองค์ประกอบ อาจเป็นระดับที่ลึกกว่าหรือระดับสูงกว่า
if i write dirty HTML, Javascript will act strangeถึงวิธีการเขียน html ที่สะอาดและถูกต้อง?
ขึ้นอยู่กับโครงสร้างโดยรวมของเอกสารของคุณจริงๆ
ถ้าคุณมี:
<div></div>
<div></div>
<div></div>มันอาจจะง่ายพอ ๆ กับการใช้งาน
mydiv.nextSibling;
mydiv.previousSibling;อย่างไรก็ตามหาก 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;previousSiblingดูเหมือนจะเป็นโซลูชันข้ามเบราว์เซอร์
นี่จะเป็นเรื่องง่าย ... เป็นรหัสจาวาสคริปต์ที่บริสุทธิ์
<script>
alert(document.getElementById("someElement").previousElementSibling.innerHTML);
</script>วิธีแก้ปัญหาทั้งหมดนี้ดูเหมือนเกินความจำเป็น ทำไมต้องใช้โซลูชันของฉัน
previousElementSibling ได้รับการสนับสนุนจาก IE9
document.addEventListener ต้องการ polyfill
previousSibling อาจส่งคืนข้อความ
โปรดทราบว่าฉันได้เลือกที่จะส่งคืนองค์ประกอบแรก / สุดท้ายในกรณีที่ขอบเขตขาด ในการใช้งาน RL ฉันต้องการให้มันส่งคืนค่าว่าง
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;
}