jQuery সার্চ - filter() পদ্ধতি

উদাহরণ

সকল div-এর রঙ পরিবর্তন করুন এবং "middle" নামক শ্রেণীকে হোল্ডার যোগ করুন:

($("div").css("background", "#c8ebcc"))
  .filter(".middle")
  .css("border-color", "red");

আপনার নিজের হাতে পরীক্ষা করুন

সংজ্ঞা ও ব্যবহার

filter() পদ্ধতি ম্যাচ করা এলিমেন্ট সংকলনকে নির্দিষ্ট সিলেক্টরের ম্যাচ করা এলিমেন্টগুলির সংকলনে কমিউট করে。

ব্যাবহারিক বিবরণ

.filter(selector)
পারামিটার বর্ণনা
selector স্ট্রিং মান, যাতে বর্তমান এলিমেন্ট সংকলনকে ম্যাচ করার জন্য ব্যবহৃত সিলেক্টর এক্সপ্রেশন থাকে。

বিস্তারিত ব্যাখ্যা

যদি ডম এলিমেন্ট সংকলন প্রদর্শনকারী jQuery অবজেক্ট দেওয়া হয়, .filter() পদ্ধতি একটি নতুন jQuery অবজেক্ট নির্মাণ করে, যা ম্যাচ করা এলিমেন্টগুলির সাবসেট হয়।ব্যবহৃত সিলেক্টরটি প্রত্যেক এলিমেন্টকে পরীক্ষা করবে; সকল সিলেক্টরের সাথে ম্যাচ করা এলিমেন্টগুলি ফলাফলে থাকবে。

দেখুন নিচের এই সাধারণ তালিকা ধারণকারী পৃষ্ঠা:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

আমরা এই তালিকাটির আইটেমগুলিকে এই পদ্ধতিতে এপ্লাই করতে পারি:

$('li').filter(':even').css('background-color', 'red');

আপনার নিজের হাতে পরীক্ষা করুন

এই ফাংশন ব্যবহারের ফলাফল হল, 1, 3, 5 নম্বরের প্রক্রিয়াকরণকে লাল রঙের ব্যাকগ্রাউন্ড করা, কারণ এইগুলি সিলেক্টর (স্মরণ করুন, :even এবং :odd 0-ভিত্তিক index-এর ভিত্তিতে) সাথে ম্যাচ করে。

ফিল্টার ফাংশন ব্যবহার করুন

এই পদ্ধতির দ্বিতীয় রূপটি হল, সিলেক্টরের বদলে ফাংশনের মাধ্যমে এলিমেন্টগুলিকে ফিল্টার করা।প্রত্যেক এলিমেন্টের জন্য, যদি ফাংশন ট্রু রিটার্ন করে, তবে এলিমেন্টটি ফিল্টার করা সংকলনে থাকবে; না তবে, এলিমেন্টটি বাদ দেওয়া হবে。

দেখুন নিচের এই কিছুটা জটিল এই HTML শব্দতালিকা:

<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong>
   - two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

আমরা এই তালিকাটির আইটেমগুলিকে চিহ্নিত করতে পারি, এবং তাদের বিষয় অনুযায়ী তাদেরকে ফিল্টার করতে পারি:

$('li').filter(function(index) {
  return $('strong', this).length == 1;
}).css('background-color', 'red');