الفرق بين المراجعتين لصفحة: «jQuery/offsetParent»
لا ملخص تعديل |
طلا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:التابع <code>. | <noinclude>{{DISPLAYTITLE:التابع <code>.offsetParent()</code> في jQuery}}</noinclude> | ||
== <code>.offsetParent()</code> == | == <code>.offsetParent()</code> == | ||
المراجعة الحالية بتاريخ 01:15، 21 يوليو 2018
.offsetParent()
القيم المعادة
يعيد كائنًا من النوع Object.
الوصف
يعيد أقرب عنصر جد (ancestor) متموضع (positioned) للعنصر المطابق.
.offsetParent()
أُضيف مع الإصدار: 1.2.6. ولا يقبل هذا الشكل أي وسائط.
إن كان لدينا كائن jQuery يمثِّل مجموعة عناصر DOM، فسيسمح لنا التابع .offsetParent() بالبحث في العناصر الأجداد (ancestors) لهذه العناصر في شجرة DOM ثمَّ ينشئ كائن jQuery جديد ويضع فيه أقرب عنصر جد متموضع عثر عليه. يكون العنصر متموضعًا (positioned) إذا كانت قيمة الخاصِّيَّة 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">أ</li>
<li class="item-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">ج</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
إن بدأنا بالعنصر "أ"، فسنجد العنصر الجد المتموضع له باستعمال:
$( "li.item-a" ).offsetParent().css( "background-color", "red" );
ستغير هذه الشيفرة لون العنصر II المتموضع في القائمة.
أمثلة
إيجاد العنصر الجد المتموضع للعنصر "أ":
<!doctype html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>offsetParent مثالٌ عن استعمال التابع</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">أ</li>
<li class="item-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">ج</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<script>$( "li.item-a" ).offsetParent().css( "background-color", "red" );</script>
</body>
</html>
مصادر