jQuery تمرين - method offsetParent()

jQuery تمرين مرجع

مثال

ضبط لون الخلفية للأبوة والأمهات الأقرب للعنصر li الذي يحتوي على اسم class item-a:

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

جرب بنفسك

تعريف والاستخدام

offsetParent() يحصل على العنصر الأبوي المحدد الموجود أقرب.

النحو

.offsetParent();

شرح مفصل

إذا تم تقديم jQuery object يمثل مجموعة عناصر DOM، يسمح لنا method .offsetParent() بالبحث في شجرة DOM عن الأبوة والأمهات للعنصر، وإنشاء jQuery object مغطى بالأبوة والأمهات المحددة الموجودة أقرب. العناصر المحددة تشير إلى أن CSS property 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 تمرين مرجع