Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

যেক্যুয়েরী পূর্বসূরী - jQuery Ancestor


পূর্বসূরী বলতে যেমন বাবা, দাদা, দাদার বাবা ইত্যাদিকে বুঝায় তেমনি যেক্যুয়েরী Ancestor বলতে এর পূর্বদিকের এলিমেন্ট গুলোকে বোঝায়। যেক্যুয়েরী ব্যবহার করে কোন এইচটিএমএল এলিমেন্টের পূর্বসূরিকে খুঁজে বের করার জন্য DOM স্ট্রাকচারের উপরের দিকে উঠতে হয়।


DOM স্ট্রাকচারের মেথড

পূর্বসূরী বা Ancestor এলিমেন্ট গুলোকে খুঁজে বের করার জন্য এইচটিএমএল DOM স্ট্রাকচারের উপরে উঠতে বেশ কিছু মেথড ব্যবহার করতে হয়। এই যেক্যুয়েরী মেথড গুলো হল নিম্নরূপ।


parent() মেথড

যেক্যুয়েরী এর parent() মেথড কোন নির্বাচিত এলিমেন্টের সরাসরি প্যারেন্ট এলিমেন্ট অর্থাৎ নির্বাচিত এলিমেন্টটি ঠিক পূর্বের যে এলিমেন্টের সন্তান সেই এলিমেন্টকে অর্থাৎ মুল এলিমেন্টকে ফেরত অর্থাৎ Return করে। এই পদ্ধতি DOM এর শুধুমাত্র একটি ধাপে আরোহন করতে পারে। নিচের উদাহরণটিতে প্রত্যেকটি <span> এলিমেন্টের সরাসরি মুল অর্থাৎ parent এলিমেন্টকে ফেরত দেয়।

উদাহরণ


$(document).ready(function(){
$("span").parent();
});

কোড এডিটর



parents() মেথড

যেক্যুয়েরী এর parent() মেথড ব্যবহার করে কোন নির্বাচিত এলিমেন্টের সব গুলো Ancestor কে ফেরত দেয়, একেবারে এইচটিএমএল ডকুমেন্টের রুট অর্থাৎ <span> এলিমেন্ট পর্যন্ত যত গুলো এলিমেন্ট বা ট্যাগের সাথে ঐ নির্বাচিত এলিমেন্টের সম্পর্ক রয়েছে সেই সকল এইচটিএমএল এলিমেন্টকে খুঁজে পাওয়া যায়। নিচে একটি উদাহরণ দেখুন, যেখানে parent() মেথড সব গুলো <span> এলিমেন্টের সমস্ত Ancestor কে ফেরত দেয়।

উদাহরণ


$(document).ready(function(){
$("span").parents();
});

কোড এডিটর


Ancestor বা পূর্বপুরুষ খুঁজে পাওয়ার ক্ষেত্রে আমরা কয়েকটি অপশনাল-প্যারামিটার ব্যবহার করতে পারি যার ফলে আমরা সার্চকে ফিল্টার করতে পারি। নিচে যেক্যুয়েরী এর parent() মেথড ব্যবহার করে একটি উদাহরণ দেখুন, এখানে সকল এলিমেন্টের সকল <ul> ট্যাগ গুলো Ancestor এলিমেন্ট কে ফেরত দেয়।

উদাহরণ


$(document).ready(function(){
$("span").parents("ul");
});

কোড এডিটর



parentsUntil() মেথড

যেক্যুয়েরী এর parentsUntil() মেথডটি দুটি নির্দিষ্ট এইচটিএমএল এলিমেন্টের মধ্যকার সব গুলো Ancestor এলিমেন্টকে ফেরত দেয়। নিচে যেক্যুয়েরী এর parentsUntil() মেথড ব্যবহার করে একটি উদাহরণ দেখুন, যেখানে <span> এবং <div> এলিমেন্ট এর মধ্যকার সকল Ancestor এলিমেন্টকে খুঁজে পাওয়া গেছে।

উদাহরণ


$(document).ready(function(){
$("span").parentsUntil("div");
});

কোড এডিটর