শেখ মাহফুজুর রহমান
jQuery ট্র্যাভার্সিং – অ্যানসেস্টরস
অ্যানসেস্টর (Ancestors) এর বাংলা হলো পূর্বপুরুষ অর্থাৎ পিতা, পিতামহ, প্রপিতামহ ইত্যাদি। যারা এইচটিএমএল বা এক্সএইচটিএমএল( HTML এবং XHTML) নিয়ে কাজ করেন তারা নিশ্চয়ই জানেন যে এই দু’টো ডকুমেন্ট ল্যাঙ্গুয়েজের এলিমেন্ট বা ট্যাগগুলোও ঠিক একই ধরণের সম্পর্ক রীতি মেনে চলে! তো, জেকোয়ারির মাধ্যমে আমরা এই দুটো ল্যাঙ্গুয়েজের ডম ট্রি(DOM tree) ট্র্যাভার্স বা আরোহন করে কোন এলিমেন্টের পূর্বপুরুষদের খুঁজে পেতে পারি।
ডম ট্রি আরোহন (Traversing)
ডম ট্রি আরোহন করার তিনটি কার্যকর জেকোয়ারি মেথড বা পদ্ধতি হলোঃ
- parent()
- parents()
- parentsUntil()
জেকোয়ারি parent() মেথড
parent() মেথড কোন নির্বাচিত এলিমেন্টের ডাইরেক্ট প্যারেন্ট এলিমেন্ট অর্থাৎ নির্বাচিত এলিমেন্টটি ঠিক পূর্বের যে এলিমেন্টের সন্তান সেই এলিমেন্টকে (পিতাকে) ফেরত (Return) দেয়। এই পদ্ধতি ডম ট্রি’র শুধুমাত্র একটি ধাপকে আরোহন করতে পারে।
নিচের উদাহরণটি প্রত্যেকটি <span> এলিমেন্টের ডাইরেক্ট প্যারেন্ট বা পিতাকে ফেরত দেয়ঃ
$(document).ready(function(){
$("span").parent();
});
ফলাফল : parent()
জেকোয়ারি parents() মেথড
এই পদ্ধতিটি কোন নির্বাচিত এলিমেন্টের সবগুলো অ্যানসেস্টরকে ফেরত দেয়, একেবারে ডকুমেন্টের রুট অর্থাৎ <html> এলিমেন্ট পর্যন্ত যতগুলো এলিমেন্ট বা ট্যাগের সাথে ঐ নির্বাচিত এলিমেন্টের সম্পর্ক আছে সেই সবগুলো এলিমেন্টকে খুঁজে পাওয়া যায়।
নিচের উদাহরণে, parents() মেথড সবগুলো <span> এলিমেন্টের সমস্ত পূর্বপুরুষকে ফেরত দেয়ঃ
$(document).ready(function(){
$("span").parents();
});
ফলাফল : parents()
আনসেস্টর বা পূর্বপুরুষ খুঁজে পাওয়ার ক্ষেত্রে আপনি কিছু অপশনাল-প্যারামিটার ব্যবহার করতে পারেন যার ফলে আপনি আপনার সার্চকে ফিল্টার করতে পারবেন।
লক্ষ্য করুন, নিচের উদাহরণটি সব এলিমেন্টের সবগুলো <ul> অ্যানসেস্টর এলিমেন্ট কে ফেরত দেয়ঃ
$(document).ready(function(){
$("span").parents("ul");
});
ফলাফল : আনসেস্টর
জেকোয়ারি parentsUntil() মেথড
parentsUntil() মেথড দুটো নির্দিষ্ট এলিমেন্টের মধ্যকার সবগুলো অ্যানসেস্টর এলিমেন্টকে ফেরত দেয়।
নিচের উদাহরণে, <span> এবং <div> এলিমেন্টের মধ্যকার সবগুলো অ্যানসেস্টর এলিমেন্টকে খুঁজে পাওয়া গেছেঃ
$(document).ready(function(){
$("span").parentsUntil("div");
});
ফলাফল : parentsUntil()