jQuery 3.3

.offsetParent()




jquery

.offsetParent () الإرجاع: jQuery

الوصف ؛: الحصول على أقرب عنصر الجد الذي يتم وضعه.

  • الإصدار المضافة: 1.2.6 .offsetParent()

    • هذه الطريقة لا تقبل أي حجج.

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

إذا بدأنا في البند "أ" ، يمكننا العثور على سلفه المتمركز:

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

سيؤدي ذلك إلى تغيير لون عنصر القائمة الثاني ، الذي يتم وضعه.

مثال:

العثور على offsetParent من عنصر "أ"

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>offsetParent demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<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>
 
<script>$( "li.item-a" ).offsetParent().css( "background-color", "red" );</script>
 
</body>
</html>

عرض: