فیلتر کردن (Filtering)
در این صفحه با فیلتر کردن (Filtering) عناصر در jQuery آشنا می شوی. یعنی از بین یک گروه المنت، بعضی ها را نگه می داری و بقیه را حذف می کنی؛ مثل وقتی از بین کل کلاس فقط شاگردهای ردیف اول را انتخاب می کنی.
متدهای فیلتر کردن در پیمایش DOM
در پیمایش درخت DOM یا Document Object Model معمولاً یک دسته عنصر انتخاب می کنی. بعد با متدهای فیلتر کردن عناصر، این دسته را کوچک تر و دقیق تر می کنی.
متدهای پایه ای این بخش first()، last()، eq()، filter() و not() هستند. با این متدها می توانی اولین، آخرین، یک ایندکس مشخص، یا فقط عناصر مطابق یک شرط را نگه داری.
در درس های قبلی با خواهر و برادرها (Siblings) و فرزندان (Descendants) آشنا شدی. حالا اینجا یاد می گیری روی همین نتایج، فیلتر کردن عناصر را انجام دهی.
متد first() در jQuery
متد first() اولین عنصر از بین عناصر انتخاب شده را برمی گرداند. مثل این است که بگویی «فقط نفر اول صف را می خواهم».
در مثال منبع، اولین تگ <div> از بین همه div ها انتخاب می شود:
$(document).ready(function() {
$("div").first();
});
معمولاً بعد از first() کار دیگری هم انجام می دهیم. مثلاً رنگ پس زمینه را عوض می کنیم یا یک کلاس CSS اضافه می کنیم.
متد last() برای آخرین عنصر
متد last() دقیقاً برعکس first() عمل می کند. یعنی آخرین عنصر از مجموعه انتخاب شده را برمی گرداند؛ مثل «نفر آخر صف».
در مثال منبع، آخرین تگ <div> انتخاب می شود:
$(document).ready(function() {
$("div").last();
});
با این متد می توانی مثلاً فقط آخرین ردیف جدول یا آخرین کارت لیست را برجسته کنی.
متد eq() و ایندکس صفرمحور
متد eq() یک عنصر را بر اساس شماره ایندکسش برمی گرداند. ایندکس (Index) یک شماره است که جای هر عنصر را در لیست مشخص می کند.
در jQuery، ایندکس از عدد صفر شروع می شود. یعنی اولین عنصر ایندکس 0 دارد، دومین 1، سومین 2 و همین طور جلو می رود.
در مثال منبع، دومین تگ <p> (با ایندکس 1) انتخاب می شود:
$(document).ready(function() {
$("p").eq(1);
});
برای به خاطر سپردن، می توانی مثل آرایه های برنامه نویسی فکر کنی. ایندکس 0 یعنی عنصر اول آرایه.
فیلتر کردن عناصر با filter()
متد filter() اجازه می دهد روی نتایج خودت یک شرط بگذاری. عناصری که شرط را رد نکنند نگه داشته می شوند. بقیه از مجموعه حذف می شوند.
در مثال منبع، همه تگ های <p> انتخاب می شوند. سپس فقط آن هایی که کلاس intro دارند نگه داشته می شوند:
$(document).ready(function() {
$("p").filter(".intro");
});
اینجا ".intro" یعنی عناصری که کلاس intro دارند. مثل این است که از بین تمام بچه های کلاس، فقط کسانی را نگه داری که عضو تیم والیبال هستند.
نکته: می توانی از انتخاب گرهای پیچیده تر CSS هم داخل filter() استفاده کنی. اما بهتر است اول با مثال های ساده تمرین کنی.
حذف عناصر ناخواسته با not()
متد not() برعکس filter() کار می کند. یعنی عناصری که با شرط مطابقت دارند حذف می شوند و بقیه نگه داشته می شوند.
در مثال منبع، همه تگ های <p> انتخاب می شوند. سپس آن هایی که کلاس intro دارند حذف می شوند:
$(document).ready(function() {
$("p").not(".intro");
});
یادت باشد: filter() یعنی «فقط این ها را نگه دار». not() یعنی «این ها را حذف کن». این دو متد مکمل هم هستند و در فیلتر کردن عناصر خیلی به درد می خورند.
تمرین گام به گام فیلتر کردن عناصر
حالا یک تمرین کوچک برای محکم کردن فیلتر کردن عناصر انجام بده. یک بخش از صفحه انتخاب کن که چند div و p پشت سر هم دارد.
- با $("div") همه div ها را انتخاب کن.
- با first() فقط اولین div را انتخاب و روی آن استایل بگذار.
- با last() فقط آخرین div را برجسته کن.
- با eq(1) دومین <p> را هدف بگیر.
- با filter(".intro") فقط پاراگراف های معرفی را نگه دار.
- با not(".intro") بقیه پاراگراف ها را رنگ متفاوت بده.
اگر این مراحل برایت راحت شد، صفحه خواهر و برادرها (Siblings) و پیمایش در صفحه (Traversing) را هم کنار همین درس مرور کن. این طوری مفهوم فیلتر کردن عناصر در کل درخت DOM برایت خیلی جا می افتد.
برای دیدن لیست کامل متدهای پیمایش، می توانی به مرجع jQuery Traversing Reference سر بزنی. اگر نیاز شد، بعداً در همین صفحه فیلتر کردن عناصر را دوباره مرور کن.
جمع بندی سریع
- فیلتر کردن عناصر یعنی کوچک کردن مجموعه انتخاب شده با قانون مشخص.
- first() و last() اولین و آخرین عنصر را برمی گردانند.
- eq(index) یک عنصر را با ایندکس صفرمحور انتخاب می کند.
- filter() فقط عناصر مطابق شرط را نگه می دارد.
- not() برعکس filter() است و عناصر ناخواسته را حذف می کند.