jQuery 遍历 - is() 方法
مثال
برمی‌گرداند false، زیرا پدر عنصر input یک عنصر p است:
var isFormParent = $("input[type='checkbox']").parent();.is("form");
$("div").text("isFormParent = " + isFormParent);
تعریف و استفاده
is() بر اساس انتخاب‌کننده، عنصر یا جعبه جویای جویا مجموعه‌ای از عناصر تطابق‌یافته را بررسی می‌کند، اگر حداقل یک عنصر در این عناصر با پارامتر داده شده تطابق یابد، پس برمی‌گرداند true.
منطق
.is(selector)
| پارامترها | توضیح |
|---|---|
| selector | مقدار رشته، شامل عبارت انتخاب‌کننده‌ای که عناصر تطابق‌یافته را شامل می‌شود. |
توضیحات
متفاوت از روش‌های فیلترینگ دیگر، .is() یک جعبه جویای جدید ایجاد نمی‌کند. به جای آن، اجازه می‌دهد که ما آن را بدون تغییر محتوای جعبه جویا بررسی کنیم. این معمولاً در callbackها مفید است، مانند برنامه‌های رویداد.
فرض کنید ما یک لیست داریم که دو مورد آن شامل عناصر فرزند هستند:
<ul> <li>لیست <strong>مورد 1</strong></li> <li><span>مورد لیست 2</span></li> <li>مورد 3</li> </ul>
شما می‌توانید برنامه کلیک را به عنصر <ul> اضافه کنید و سپس کد را به صورتی محدود کنید که فقط زمانی فعال شود که مورد لیست خود، نه فرزندان آن، کلیک شود:
$("ul").click(function(event) {
var $target = $(event.target);
if ( $target.is("li") ) {
$target.css("background-color", "red");
}
);
حالا، هنگامی که کاربر روی کلمه "لیست" در اولین مورد لیست یا روی هر کلمه‌ای در سومین مورد لیست کلیک می‌کند، مورد لیست کلیک شده به رنگ پس‌زمینه قرمز تنظیم می‌شود. اما، هنگامی که کاربر روی کلمه item 1 در اولین مورد لیست یا روی هر کلمه‌ای در دومین مورد لیست کلیک می‌کند، هیچ تغییری ایجاد نمی‌شود، زیرا در این شرایط، هدف رویداد <strong> است <span>.
لطفاً توجه داشته باشید که برای عبارات انتخاب‌گر مکان‌دار مانند :first، :gt() یا :even، فیلتر مکان‌دار برای جعبه‌ی jQuery که به .is() ارسال می‌شود اعمال می‌شود، نه برای کل مستند. بنابراین برای HTML بالا، عباراتی مانند $("li:first").is("li:last") بازگشتی true دارند، اما $("li:first-child").is("li:last-child") بازگشتی false دارد.
استفاده از تابع
یکی از کاربردهای دوم این روش، ارزیابی عبارت‌های مرتبط بر اساس تابع به جای انتخاب‌گر است. برای هر عنصر، اگر تابع بازگشتی true را داشته باشد، .is() نیز true را بازگشتی دارد. به عنوان مثال، قطعه HTML زیر کمی پیچیده‌تر است:
<ul>
<li><strong>مورد</strong> 1 - یک تگ قوی</li>
<li><strong>مورد</strong> 2 -
دو <span>تگ قوی</span></li>
<li>مورد 3</li>
<li>مورد 4</li>
<li>مورد 5</li>
</ul>
شما می‌توانید برنامه‌ی کلیک برای هر <li> اضافه کنید تا تعداد عناصر <strong> درون <li> کلیک شده را محاسبه کنید:
$("li").click(function() {
var $li = $(this),
isWithTwo = $li.is(function() {
return $('strong', this).length === 2;
};
if ( isWithTwo ) {
$li.css("background-color", "green");
} else {
$li.css("background-color", "red");
}
);
