فیلتر کردن در پیمایش

فیلتر نتایج با first()، last()، eq()، filter() و not()

فیلتر کردن مجموعه عناصر

متدهای فیلتر، از بین عناصر انتخاب‌شده، فقط موارد مشخصی را نگه می‌دارند:

متدکار
first()اولین عنصر مجموعه
last()آخرین عنصر مجموعه
eq(index)عنصر با ایندکس مشخص (از صفر)
filter()عناصری که شرط را دارند
not()عناصری که شرط را ندارند (برعکس filter)
has()عناصری که فرزند مشخصی دارند

مثال‌ها

// اولین پاراگراف
$("p").first().css("color", "red");

// آخرین پاراگراف
$("p").last().css("color", "blue");

// سومین پاراگراف (ایندکس ۲)
$("p").eq(2).css("color", "green");

// فقط پاراگراف‌هایی که کلاس intro دارند
$("p").filter(".intro").css("background", "yellow");

// همه به‌جز پاراگراف‌های کلاس intro
$("p").not(".intro").css("opacity", 0.7);

// divهایی که داخلشان ul است
$("div").has("ul").css("border", "2px solid purple");

filter با تابع

قدرت واقعی filter() در قبول تابع است — می‌توانید شرط دلخواه بنویسید:

// پاراگراف‌هایی که بیش از ۱۰۰ کاراکتر دارند
$("p").filter(function() {
    return $(this).text().length > 100;
}).css("color", "gray");

// liهایی که متنشان با "مهم" شروع می‌شود
$("li").filter(function(index) {
    return $(this).text().startsWith("مهم");
}).addClass("important");

eq با ایندکس منفی

// از آخر: eq(-1) یعنی آخرین عنصر
$("p").eq(-1).css("color", "red");   // مثل last()
$("p").eq(-2).css("color", "blue");  // یکی مانده به آخر

مثال کاربردی: جدول راه‌راه با filter

// رنگ‌آمیزی ردیف‌های زوج (بدون سلکتور :even)
$("tr").filter(function(index) {
    return index % 2 === 0;
}).css("background", "#f7f7f7");

// هایلایت ردیف‌هایی که قیمت بالای ۱۰۰ دارند
$("tr").filter(function() {
    return parseInt($(this).find(".price").text()) > 100;
}).addClass("expensive-row");

تفاوت فیلترهای سلکتوری و متدی

این دو خط یک کار می‌کنند:

$("p:first")            // فیلتر داخل سلکتور
$("p").first()          // متد first
متدها (.first()، .eq()...) در زنجیره‌سازی بهتر هستند چون می‌توان وسط زنجیره از آن‌ها استفاده کرد: $("div").children("p").first().fadeOut()

جمع‌بندی

این مبحث بخشی از دوره آموزش کامل jQuery است.

ابزارهای مرتبط