jQuery تمرین - روش offsetParent()

jQuery تمرین مرجع

مثال

رنگ پس‌زمینه عنصر پدر مستقیم عنصر li با نام کلاس item-a را تنظیم کنید:

$('li.item-a').offsetParent().css('background-color', 'red');

خودش امتحان کن

تعریف و استفاده

offsetParent عنصر پدر مستقیم مکان‌گذاری شده را دریافت می‌کند.

جملات

.offsetParent();

توضیحات دقیق

اگر یک شی jQuery نشان‌دهنده مجموعه‌ای از عناصر DOM داده شود، روش .offsetParent() اجازه می‌دهد تا در درخت DOM جستجو کنیم و یک شی jQuery ایجاد کنیم که توسط عنصر پدر مستقیم مکان‌گذاری شده محاط شده است. عنصر مکان‌گذاری شده به معنای آن است که مقدار CSS position برای آن به relative، absolute یا fixed تنظیم شده باشد. این اطلاعات در زمان محاسبه حرکت‌های انیمیشن و قرار دادن اشیاء در صفحه بسیار مفید خواهد بود.

صفحه‌ای که دارای لیست‌های فروکشیده بنیادی و عناصر مکان‌گذاری شده است را در نظر بگیر

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii" style="position: relative;">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');.offsetParent();.css('background-color', 'red');

خودش امتحان کن

این تغییر رنگ پس‌زمینه عنصر شناسایی شده II را خواهد کرد。

jQuery تمرین مرجع