আমি কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে HTML এ পরবর্তী উপাদান পেতে পারি?
ধরুন আমার কাছে তিনটি আছে <div>এবং আমি জাভাস্ক্রিপ্ট কোডের একটিতে একটি রেফারেন্স পেয়েছি, আমি পেতে চাই যা পরবর্তী <div>এবং কোনটি পূর্ববর্তী।
আমি কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে HTML এ পরবর্তী উপাদান পেতে পারি?
ধরুন আমার কাছে তিনটি আছে <div>এবং আমি জাভাস্ক্রিপ্ট কোডের একটিতে একটি রেফারেন্স পেয়েছি, আমি পেতে চাই যা পরবর্তী <div>এবং কোনটি পূর্ববর্তী।
উত্তর:
খাঁটি জাভাস্ক্রিপ্টে আমার চিন্তাভাবনাটি হ'ল আপনাকে প্রথমে কোনও সংগ্রহের মধ্যে এগুলি জমা করতে হবে।
var divs = document.getElementsByTagName("div");
//divs now contain each and every div element on the page
var selectionDiv = document.getElementById("MySecondDiv");সুতরাং মূলত সিলেকশন দিয়ে ডিভেশন সংগ্রহের মাধ্যমে এটির সূচক খুঁজতে পুনরাবৃত্তি করুন এবং তারপরে স্পষ্টতই -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 আছে হিসাবে একই স্তরের উপর ভাইবোন তারপর definately 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কিভাবে পরিষ্কার এবং বৈধ এইচটিএমএল লেখার বিষয়ে?
সত্যিই আপনার নথির সামগ্রিক কাঠামোর উপর নির্ভর করে।
যদি তোমার থাকে:
<div></div>
<div></div>
<div></div>এটি ব্যবহারের মাধ্যমে ট্র্যাভারিংয়ের মতো সহজ হতে পারে
mydiv.nextSibling;
mydiv.previousSibling;তবে, 'নেক্সট' ডিভটি নথির যে কোনও জায়গায় থাকতে পারে আপনার আরও জটিল সমাধানের প্রয়োজন হবে। আপনি কিছু ব্যবহার করে চেষ্টা করতে পারেন
document.getElementsByTagName("div");এবং আপনি যে কোনও জায়গায় যেখানে চান সেগুলি পেতে এগুলি দিয়ে ছুটে চলা।
আপনি যদি এই জাতীয় প্রচুর পরিমাণে ডিওএম ট্র্যাভারসিং করে থাকেন তবে আমি jQuery এর মতো কোনও লাইব্রেরি সন্ধান করার পরামর্শ দেব।
প্রত্যেকটি এইচটিএমলেমেন্টে একটি বৈশিষ্ট্য রয়েছে, "পূর্ববর্তীকর্মশিবলিং"।
উদা:
<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ক্রস ব্রাউজার সমাধান বলে মনে হচ্ছে।
এই সমস্ত সমাধানগুলি ওভারকিলের মতো দেখায়। আমার সমাধানটি কেন ব্যবহার করবেন?
previousElementSibling আইই 9 থেকে সমর্থিত
document.addEventListener একটি পলিফিল প্রয়োজন
previousSibling একটি পাঠ্য ফিরে আসতে পারে
দয়া করে মনে রাখবেন যে সীমাগুলি ভেঙে যাওয়ার ক্ষেত্রে আমি প্রথম / শেষ উপাদানটি ফেরত দিতে বেছে নিয়েছি। একটি আরএল ব্যবহারে, আমি এটিকে শূন্য ফেরত দেওয়া পছন্দ করব।
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;
}