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