jQuery find(): ধাপে ধাপে গাইড

jQuery find() মেথডের নাম শুনতে পরিচিত লাগতে পারে, কিন্তু এটিকে জাভাস্ক্রিপ্টের find() মেথডের সাথে গুলিয়ে ফেলবেন না! উভয়ই "ফাইন্ড" বা খুঁজে বের করে, কিন্তু তারা যা রিটার্ন করে তা পার্থক্যপূর্ণ হতে পারে। জাভাস্ক্রিপ্টে, find() মেথড শুধুমাত্র একটি অ্যারে (array) এ কল করা যায়।

এটি একটি কলব্যাক ফাংশন নেয়, যা একটি মেথডে আর্গুমেন্ট হিসেবে পাস করা একটি ফাংশন যা পরে কল হবে। এটি কলব্যাক ফাংশনে সংজ্ঞায়িত শর্তাবলী পূরণ করার প্রথম এলিমেন্টটি খুঁজে বের করে রিটার্ন করে।

jQuery find() মেথডটি সম্পূর্ণ ভিন্ন। সকল jQuery মেথডের মতো, এটি একটি সিলেক্টরে কল করা হয়। এটি সেই সিলেক্টরের ভিতরে সার্চ করে এবং শুধুমাত্র সেই সিলেক্টরের চাইল্ড (child) এলিমেন্টগুলিকে ম্যানিপুলেট করে। এই উচ্চ মানের ম্যানিপুলেশন ক্ষমতা তখন কাজে আসে যখন আপনি একই প্যারেন্ট এলিমেন্টে থাকা কিছু এলিমেন্ট পরিবর্তন করতে চান অন্যগুলো না করে।

jQuery find() ব্যবহার করা

এখন আমরা জানি jQuery find() একটি দেওয়া সিলেক্টরের সকল চাইল্ড এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়। কীভাবে jQuery find() ব্যবহার করতে হয় তা বোঝার জন্য কিছু উদাহরণ কোড দেখি।

সरल শুরু করি এবং পরবর্তী সেকশনে জটিলতা যোগ করি। পৃষ্ঠা লোড হওয়ার পর একটি এলিমেন্ট ম্যানিপুলেট করে আমরা find() কীভাবে কাজ করে তা দেখাতে পারি। কীভাবে একটি প্যারাগ্রাফের প্রেক্ষাপটে কিছু শব্দের রঙ পরিবর্তন করা যায় সেটা দেখি। শুরু করি:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
  <h2> jQuery find() method example </h2>
  <p> This is an example paragraph. </p>
  <p>We are going to change the color <span>blue</span> to the color blue.</p>
  <div class="green">We are going to change the word <span>green</span> to the color green.</div>
  <p> Every other will word will stay the same. </p>
</div>

এই কোডটি দেখলে বুঝবেন <p> এলিমেন্টের ভিতরে কয়েকটি <span> এলিমেন্ট আছে। একটি <span> এলিমেন্ট <p> এলিমেন্টের চাইল্ড। আরেকটি <span> "green" ক্লাস 가진 <div> এলিমেন্টের চাইল্ড। আমাদের প্যারাগ্রাফটি বলে, আমরা শুধু <span> ট্যাগে মোড়ানো শব্দগুলো রঙিন করব। আগে নিশ্চিত হই HTML রেন্ডার হচ্ছে কিনা:

আমাদের HTML রেন্ডার হচ্ছে। এখন find() এর কাজ দেখাতে টেক্সটের রঙ পরিবর্তন করব। এটি začашаতোরদের জন্য একটি চমৎকার ধাপ কারণ আমাদের শুধু একটি CSS অ্যাট্রিবিউট পরিবর্তন করেই এটি করা যাবে। <p> এলিমেন্টকে সিলেক্টর হিসেবে find() এ পাস করে, আমরা jQuery-এর css() মেথড ব্যবহার করে রঙ পরিবর্তন করব:

<script>
$(document).ready(() => {
  $('p').find('span').css('color', 'blue');
  $('div.green').find('span').css('color', 'green');
})
</script>

find() এর প্রথম ব্যবহারে, আমরা সকল <p> এলিমেন্ট সিলেক্ট করছি। find() ব্যবহার করে <p>-এর চাইল্ড যেকোনো <span> এলিমেন্ট খুঁজে বের করছি। এই উদাহরণে, এটি শুধু "blue" শব্দটি। তারপর css() মেথড ব্যবহার করে রঙ নীল করছি।

find() এর দ্বিতীয় ব্যবহারে, আমরা "green" ক্লাস 가진 <div> সিলেক্ট করছি এবং তাতে find() কল করছি। মেথডটি সেই <div>-এর চাইল্ড একটি <span> এলিমেন্ট খুঁজে বের করছে। আবারও, এটি শুধু "green" শব্দটি। প্রথম লাইনের মতো, css() মেথড ব্যবহার করে রঙ সবুজ করছি।

চলিয়ে দেখি কী হয়!

লক্ষ্য করুন "blue" এবং "green" উভয় শব্দই <span> এলিমেন্টে মোড়ানো আছে কিন্তু কোনো ক্লাস বা আইডি নেই। তবুও আমরা সেই শব্দগুলো আলাদা করে তাদের রঙ পরিবর্তন করতে পেরেছি। কারণ, <span>-এর প্যারেন্ট এলিমেন্টগুলো ভিন্ন।

<p> "blue" শব্দটি ধারণকারী <span>-এর প্যারেন্ট। "green" ক্লাস 가진 <div> "green" শব্দটি ধারণকারী <span>-এর প্যারেন্ট।

এটি ঘটলো কারণ find() সিলেক্টর হিসেবে ব্যবহৃত এলিমেন্টের চাইল্ডগুলো লোকেট করে। এখন কিছু জটিলতা যোগ করি এবং একটি টু-ডু লিস্টের উদাহরণ দেখি।

লিস্টে jQuery find()

এই উদাহরণে, আমাদের একটি টু-ডু লিস্ট আছে। আজ আমাদের কিছু কাজ করতে হবে, কিন্তু কাজগুলো করতে হলে দোকান থেকে কিছু কিনতে হবে। একবার কিনে নিলে সেগুলো লিস্ট থেকে কাটিয়ে ফেলে বাকি কাজগুলো করতে পারব! আমাদের লিস্ট:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
  <h2> To Do list example </h2>
  <ul>
    <li class="store">Go to the store
      <ul>
        <li>Trash bags</li>
        <li>Dish Soap</li>
      </ul>
    </li>
    <li>Take out the trash</li>
    <Li>Wash the dishes</Li>
  </ul>
</div>

এখানে আমাদের লিস্টটি আছে। "Go to the store", "Take out the trash", এবং "Wash the dishes" <li> এলিমেন্টগুলো "main" আইডি 가진 <div>-এর চাইল্ড <ul> এলিমেন্টের চাইল্ড। "Go to the store" লিস্ট আইটেমের ভিতরে দোকান থেকে কিনতে হবে এমন জিনিসগুলো আছে। আমাদের কচরার ব্যাগ এবং বर्तन ধোয়ার সাবান দরকার আজকের কাজগুলো সম্পন্ন করার জন্য। আমরা সেগুলো নেস্টেড লিস্ট হিসেবে "store" ক্লাস 가진 <li>-এর চাইল্ড হিসেবে রাখেছি।

এখন আমরা কেনাকাটা শেষে এই আইটেমগুলো লিস্ট থেকে কাটিয়ে ফেলতে পারি:

<script>
$(document).ready(() => {
  $('li.store').find('li').css('text-decoration', 'line-through')
})
</script>

"store" ক্লাস 가진 <li> সিলেক্ট করে find() ব্যবহার করে এর চাইল্ড <li> এলিমেন্টগুলো লোকেট করলেই আমরা শুধু সেই আইটেমগুলো লিস্টে কাটাচিহ্ন দিতে পারি। আবার jQuery css() মেথড ব্যবহার করে "text-decoration" অ্যাট্রিবিউটের মান "line-through" সেট করছি। এর ফলে সিলেক্ট করা আইটেমগুলোর ওপর লাইন দেখাবে:

উপসংহার

jQuery find() মেথডটি এটিকে পাস করা সিলেক্টরের সকল চাইল্ড এলিমেন্ট লোকেট করে। find() মেথড শুধু এই চাইল্ড এলিমেন্টগুলোকেই ম্যানিপুলেট করে, প্যারেন্টকে না।

কোন চাইল্ড এলিমেন্ট সিলেক্ট করতে হবে তা পার্থক্য করতে পারা আমাদের সক্ষম করে পুরো পৃষ্ঠার একটি সেকশন পরিবর্তন করার থেকে শুরু করে শুধু নির্দিষ্ট এলিমেন্টগুলো পরিবর্তন করার পর্যন্ত। এই ফ্লেক্সিবিলিটির ভিতরেই find() নিজেকে সবচেয়ে উপকারী প্রমাণ করে।

jQuery শিখতে চান? আরও জানতে এখানে ক্লিক করুন।