jQuery مرور - روش parents()

مثال

پیداکردن همه پدران هر عنصر b:

$("b").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 و غیره تنظیم می‌کند (تا <html>) که درخت DOM را به بالا تا می‌رسد. به دلیل اینکه ما انتخاب‌گر عبارت را اعمال نکرده‌ایم، عناصر والد به طور طبیعی به بخشی از اشیاء تبدیل شدند. اگر انتخاب‌گر اعمال شده باشد، قبل از اینکه عناصر در بر گیرنده قرار گیرند، بررسی می‌شود که آیا عناصر با انتخاب‌گر مطابقت دارند یا خیر. به دلیل اینکه ما انتخاب‌گر عبارت را اعمال نکرده‌ایم، تمام عناصر اجداد به بخشی از جعبه jQuery تبدیل شدند. اگر انتخاب‌گر اعمال شده باشد، فقط عناصر مطابقت‌دار در بر گیرنده قرار می‌گیرند.