مطالعه jQuery - روش parents()
تعریف و استفاده
parents() دریافت عناصر اجدادی هر عنصر در مجموعه تطابق فعلی، استفاده از انتخابگر برای فیلتر کردن قابل انتخاب است.
.parents()selector)
| پارامتر | شرح |
|---|---|
| selector | مقدار رشته‌ای که شامل عبارت انتخابگر برای تطابق با عناصر است. |
شرح جزئی
اگر یک شیء jQuery که مجموعه‌ای از عناصر DOM را نشان می‌دهد داده شود، روش .parents() اجازه می‌دهد تا در درخت DOM اجداد این عناصر را جستجو کنیم و یک شیء جدید jQuery از عناصر تطابق‌یافته که از نزدیک‌ترین عنصر والد به بالا مرتب شده‌اند، بسازیم. عناصر به ترتیب از نزدیک‌ترین عنصر والد به بیرون بازگردانده می‌شوند. .parents() و .parent() روش مشابهی است، اما تفاوت این است که این یکی از یک لایه به لایه‌های بالاتر در درخت DOM حرکت می‌کند.
این روش یک عبارت انتخابگر اختیاری را می‌پذیرد، که نوعی از پارامترهایی است که به تابع $() ارسال می‌کنیم. اگر این انتخابگر اعمال شود، عناصر با بررسی اینکه آیا با این انتخابگر مطابقت دارند یا خیر، فیلتر می‌شوند.
این صفحه‌ای با لیست‌های برجسته ساده را در نظر بگیرید:
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
اگر از پروژه A شروع کنیم، می‌توانیم اجداد آن را پیدا کنیم:
$('li.item-a').parents().css('background-color', 'red');
نتیجه این فراخوانی این است که عناصر level-2 لیست، پروژه II و لیست level-1 و غیره (با حرکت از درخت DOM تا <html>) با پس‌زمینه قرمز تنظیم می‌شوند. چون ما انتخابگر عبارت را اعمال نکرده‌ایم، به طور طبیعی عنصر والد به عنوان بخشی از شیء در نظر گرفته می‌شود. اگر انتخابگر اعمال شده باشد، قبل از اینکه عنصر شامل شود، بررسی می‌شود که آیا عنصر با انتخابگر مطابقت دارد یا خیر. چون ما انتخابگر عبارت را اعمال نکرده‌ایم، تمام اجداد به عنوان بخشی از شیء بازگردانده شده‌اند. اگر انتخابگر اعمال شده باشد، فقط عناصر مطابقت‌دار شامل می‌شوند.
