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