jQuery جستجو - روش filter()

دستورالعمل مرور jQuery

مثال

تمام رنگ divها را تغییر دهید و سپس به کلاس "middle" حاشیه اضافه کنید:

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

با دست خود امتحان کنید

تعریف و استفاده

روش filter() مجموعه‌ای از عناصر که با انتخاب‌گر مشخص شده مطابقت دارند، را از مجموعه‌ای از عناصر کاهش می‌دهد.

نحوه‌ی استفاده

.filter(selector)
پارامتر توضیح
selector مقدار رشته‌ای که شامل عبارت انتخاب‌گر برای تطبیق مجموعه فعلی عناصر است.

توضیحات

اگر یک جعبه jQuery به عنوان مجموعه‌ای از عناصر DOM داده شود، روش .filter() یک جعبه jQuery جدید از مجموعه‌ای از عناصر که با انتخاب‌گر مطابقت دارند، ایجاد می‌کند. انتخاب‌گر استفاده شده هر عنصر را تست می‌کند؛ تمام عناصر که با این انتخاب‌گر مطابقت دارند، در نتیجه شامل می‌شوند.

لطفاً صفحه زیر با لیست ساده را در نظر بگیرید:

<ul>
  <li>عنصر لیست 1</li>
  <li>عنصر لیست 2</li>
  <li>عنصر لیست 3</li>
  <li>عنصر لیست 4</li>
  <li>عنصر لیست 5</li>
  <li>عنصر لیست 6</li>
</ul>

ما می‌توانیم این روش را به مجموعه این عناصر لیست اعمال کنیم:

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

با دست خود امتحان کنید

نتیجه این فراخوانی، تنظیم رنگ پس‌زمینه برای پروژه‌های 1، 3 و 5 به رنگ قرمز است، زیرا آن‌ها با انتخاب‌گر مطابقت دارند (به خاطر بیاورید که :even و :odd از index بر اساس 0 استفاده می‌کنند).

از تابع فیلتر استفاده کنید

شکل دوم استفاده از این روش، از طریق یک تابع به جای انتخاب‌گر است. برای هر عنصر، اگر تابع به بازگشت true دهد، عنصر در مجموعه فیلتر شده شامل خواهد شد؛ در غیر این صورت، آن عنصر حذف خواهد شد.

لطفاً این بخش از HTML پیچیده‌تر زیر را ببینید:

<ul>
  <li><strong>لیست</strong> عنصر 1 - یک برچسب قوی</li>
  <li><strong>لیست</strong> عنصر <strong>2</strong>
   - دو <span>برچسب قوی</span></li>
  <li>عنصر لیست 3</li>
  <li>عنصر لیست 4</li>
  <li>عنصر لیست 5</li>
  <li>عنصر لیست 6</li>
</ul>

ما می‌توانیم این عناصر لیست را انتخاب کنیم و سپس آن‌ها را بر اساس محتوای آن‌ها فیلتر کنیم:

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

دستورالعمل مرور jQuery