jQuery کا جستجو - filter() طریقہ
مثال
تمام div کا رنگ بدل کرنا اور "middle" کی کلاس میں کیرنل جوڑنا:
($("div").css("background", "#c8ebcc"))
.filter(".middle")
.css("border-color", "red");
تعریف و استفاده
روش filter() مجموعه عناصر تطبیقی را به مجموعه‌ای از عناصر تطبیقی با انتخاب‌کننده مشخص شده کاهش می‌دهد.
قوانین دستور زبان
.filter(selector)
| پارامتر | توضیح |
|---|---|
| selector | مقدار رشته‌ای که شامل عبارت انتخاب‌کننده‌ای است که برای تطبیق مجموعه فعلی استفاده می‌شود. |
شرح
اگر جعبه jQuery برای مجموعه‌ای از عناصر DOM داده شود، روش .filter() یک جعبه جدید از مجموعه‌ای از عناصر که با انتخاب‌کننده مطابقت دارند، ایجاد می‌کند. انتخاب‌کننده استفاده شده هر عنصر را تست می‌کند؛ تمام عناصر که با انتخاب‌کننده مطابقت دارند، در نتیجه شامل می‌شوند.
لطفاً این صفحه‌ای که دارای لیست ساده‌ای است را در نظر بگیرید:
<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 استفاده می‌کنند).
از تابع فیلتر استفاده کنید
شکل دوم استفاده از این روش، استفاده از یک تابع به جای یک انتخاب‌کننده است. برای هر عنصر، اگر تابع بازگشتی true را برمی‌گرداند، عنصر در مجموعه فیلتر شده شامل می‌شود؛ در غیر این صورت، آن عنصر حذف می‌شود.
لطفاً این بخش از HTML پیچیده‌تر زیر را ببینید:
<ul> <li><strong>list</strong> item 1 - one strong tag</li> <li><strong>list</strong> item <strong>2</strong> - دو <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');
