জেকুয়েরি ট্রাভার্সিং - পূর্বসূরী
পূর্বসূরী বলতে বাবা, দাদা, দাদার বাবা ইত্যাদিকে বুঝায় এবং এভাবে উপরের দিকে চলতে থাকবে।
জেকুয়েরির মাধ্যমে কোনো এলিমেন্টের পূর্বসূরিকে খুঁজে বের করতে DOM স্ট্রাকচারের উপরের দিকে উঠতে হয়।
DOM স্ট্রাকচারের উপরে উঠা
পূর্বসূরীকে খুঁজে বের করতে DOM স্ট্রাকচারের উপরে উঠার মেথড গুলো নিম্নরূপ:
parent()parents()parentsUntil()
parent() মেথড
parent() মেথডের মাধ্যমে নির্বাচিত এলিমেন্ট এর সরাসরি প্যারেন্ট এলিমেন্টকে খুঁজে পাওয়া যায়।
এই মেথডের মাধ্যমে ডোম স্ট্রাকচারের মাত্র একধাপ উপরে উঠা যায়।
নিচের উদাহরণে প্রত্যেক <span> এলিমেন্টের সরাসরি প্যারেন্টকে রিটার্ণ করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
.test * {
display: block;
border: 2px solid red;
color: red;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function(){
$("span").parent().css({"color": "green", "border": "2px solid green"});
});
</script>
</head>
<body>
<div class="test">
<div style="width:500px;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
<div style="width:500px;">div (grandparent)
<p>p (direct parent)
<span>span</span>
</p>
</div>
</div>
</body>
</html>
ফলাফল
parents() মেথড
parents() মেথড নির্বাচিত এলিমেন্টের সকল পূর্বসূরিকে ফেরত দেয়। এই পদ্ধতিতে ডকুমেন্টের একেবারে মূলে (<html>) পৌঁছানো যায়।
নিচের উদাহরণে সকল <span> এলিমেন্টের সকল পূর্বসূরিকে রিটার্ন করে:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").parents().css({"color": "green", "border": "2px solid green"});
});
</script>
</head>
<body class="test">body (great-great-grandparent)
<div style="width:500px;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
</body>
</html>
ফলাফল
কোনো নির্দিষ্ট এলিমেন্টকে খুঁজে বের করার জন্য আপনি ইচ্ছা করলে parents() মেথডের মধ্যে অতিরিক্ত প্যারামিটারও ব্যবহার করতে পারেন।
নিচের উদাহরণে <span> এলিমেন্ট সকল <ul> এলিমেন্টকে রিটার্ণ করে:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").parents("ul").css({"color": "green", "border": "2px solid green"});
});
</script>
</head>
<body class="test">body (great-great-grandparent)
<div style="width:500px;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
</body>
</html>
ফলাফল
parentsUntil() মেথড
parentsUntil() মেথডের মাধ্যমে দুইটি এলিমেন্টের মধ্যবর্তী সকল পূর্বসূরীকে খুঁজে বের করা যায়।
নিচের উদাহরণে <span> এবং <div> এলিমেন্টের মধ্যে সকল পূর্বসূরিকে রিটার্ণ করে:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<style>
.test * {
display: block;
border: 2px solid red;
color: red;
padding: 5px;
margin: 15px;
}
</style>
<script src="../../ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").parentsUntil("div").css({"color": "blue", "border": "2px solid blue"});
});
</script>
</head>
<body class="test"> body (great-great-grandparent)
<div style="width:500px;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
</body>
</html>
ফলাফল
জেকুয়েরি ট্রাভার্সিং রেফারেন্স
ট্রাভার্সিং-এর সবগুলো মেথড জানার জন্য আমাদের জেকুয়েরি ট্রাভার্সিং রেফারেন্স পেজে ভিজিট করুন।