سلکتورهای پیشرفته

فیلترهای :first، :last، :even، :odd، :contains و سلکتورهای فرم

فیلترهای jQuery

علاوه بر سلکتورهای CSS، jQuery فیلترهای قدرتمند خودش را دارد که با علامت : شروع می‌شوند. این فیلترها انتخاب عناصر را بسیار دقیق‌تر می‌کنند.

فیلترهای موقعیتی

فیلترتوضیحمثال
:firstاولین عنصر$("p:first")
:lastآخرین عنصر$("p:last")
:evenعناصر با ایندکس زوج (۰، ۲، ۴...)$("tr:even")
:oddعناصر با ایندکس فرد (۱، ۳، ۵...)$("tr:odd")
:eq(n)عنصر با ایندکس n (از صفر)$("li:eq(2)")
:gt(n)عناصر با ایندکس بزرگ‌تر از n$("li:gt(2)")
:lt(n)عناصر با ایندکس کوچک‌تر از n$("li:lt(2)")
یادتان باشد ایندکس‌ها از صفر شروع می‌شوند! پس :eq(2) سومین عنصر را انتخاب می‌کند، نه دومین را. همچنین :even عنصر اول (ایندکس ۰) را شامل می‌شود چون صفر عدد زوج است.

فیلترهای محتوایی

فیلترتوضیحمثال
:contains(text)عناصری که متن مشخصی دارند$("p:contains('سلام')")
:emptyعناصر خالی$("td:empty")
:has(selector)عناصری که عنصر مشخصی داخلشان است$("div:has(p)")
:parentعناصری که فرزند دارند$("td:parent")

فیلترهای نمایش

فیلترتوضیح
:hiddenعناصر مخفی (display:none یا input مخفی)
:visibleعناصر قابل مشاهده
// شمارش پاراگراف‌های مخفی و نمایان
var hidden = $("p:hidden").length;
var visible = $("p:visible").length;
console.log("مخفی: " + hidden + " | نمایان: " + visible);

فیلترهای فرم

یکی از کاربردی‌ترین گروه فیلترها برای کار با فرم‌ها:

فیلترتوضیح
:inputهمه inputها، textareaها، selectها و buttonها
:textinputهایی با type="text"
:passwordفیلدهای رمز عبور
:radioدکمه‌های رادیویی
:checkboxچک‌باکس‌ها
:checkedعناصر تیک‌خورده (radio و checkbox)
:selectedگزینه انتخاب‌شده در select
:disabledعناصر غیرفعال
:enabledعناصر فعال

مثال: کار با فرم

// پیدا کردن همه چک‌باکس‌های تیک‌خورده
var checked = $("input:checkbox:checked");

// غیرفعال کردن همه فیلدهای متنی
$("input:text").prop("disabled", true);

// گرفتن مقدار گزینه انتخاب‌شده
var city = $("select option:selected").val();

فیلترهای فرزند

فیلترتوضیح
:first-childعنصری که اولین فرزند والدش است
:last-childعنصری که آخرین فرزند والدش است
:nth-child(n)فرزند n-اُم والد (از یک شروع می‌شود!)
:only-childعنصری که تنها فرزند والدش است
تفاوت مهم: :first اولین عنصر در کل مجموعه انتخاب‌شده است، اما :first-child عناصری هستند که در والد خودشان اولین فرزند باشند. مثلاً $("li:first-child") اولین آیتمِ هر لیست را انتخاب می‌کند.

ترکیب سلکتورها با فیلترها

// اولین پاراگراف داخل div با کلاس content
$("div.content p:first");

// آیتم‌های لیست با ایندکس بزرگ‌تر از ۳
$("ul li:gt(3)");

// سلول‌های خالی جدول
$("table td:empty").html("-");

جمع‌بندی

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

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