التابع .andSelf() في jQuery
.andSelf()
القيمة المعادة
كائن jQuery.
أُهمِل هذا التّابع في الإصدار: 1.8، وأُزيل في الإصدار: 3.0.
الوصف
يُستخدَم التّابع .andSelf() في إضافة مجموعة العناصر الموجودة سابقًا في المَكدَس (stack) إلى المجموعة الحاليّة.
.andSelf()
أُضيفت في الإصدار: 1.2.
لا يقبل هذا التابع أيّة وسائط.
ملاحظة: أصبح هذا التّابع مهملًا، ويُعتبَر الآن اسمًا بديلًا (alias) للتابع .addBack() والذي يجب استخدامه في إصدار jQuery 1.8 فما بعد.
كما هو موصوف في صفحة التّابع .end() تحتفظ كائنات jQuery بمَكدَس داخلي يتتبّع التغييرات إلى مجموعة العناصر المُوافقة. عندما يُستدعى أحد توابع التحكّم في DOM تُدفَع مجموعة العناصر الجديدة في المكدس. يُساعدنا التّابع .andSelf() إن كُنّا نرغب بالاحتفاظ بمجموعة العناصر الموجودة سابقًا.
فلنأخذ مثالًا عن صفحة تحتوي على قائمة بسيطة:
<ul>
<li>العنصر 1 في القائمة</li>
<li>العنصر 2 في القائمة</li>
<li class="third-item">العنصر 3 في القائمة</li>
<li>العنصر 4 في القائمة</li>
<li>العنصر 5 في القائمة</li>
</ul>
ينتج عن الشّيفرة التالية خلفيّة حمراء خلف عناصر القائمة الثّالث والرّابع والخامس:
$( "li.third-item" ).nextAll().andSelf()
.css( "background-color", "red" );
في البداية يجد المُحدِّد المبدئي العنصر الثالث من القائمة، ممّا يُؤدِّي إلى تهيئة المَكدَس بمجموعة تحتوي فقط على هذا العنصر، ثمّ يدفع استدعاء التابع .nextAll() العناصر 4 و 5 إلى المَكدَس، وأخيرًا يدمج التّابع .andSelf() هاتين المجموعتين معًا، مُنشِئًا بذلك كائن jQuery يُشير إلى العناصر الثّلاثة بحسب ترتيبها في المستند:
{[<li.third-item>,<li>,<li> ]}
أمثلة
يُؤدّي التّابع .andSelf() لإضافة مجموعة عناصر DOM الموجودة سابقًا في المَكدَس إلى المجموعة الحاليّة. في المثال الأول من الشّيفرة التالية يحتوي المَكدَس على المجموعة النّاتجة عن .find("p")، وفي المثال الثّاني يُضيف التّابع .andSelf() مجموعة العناصر الموجودة سابقًا في المكدس وهي في هذه الحالة $( "div.after-andself" ) إلى المجموعة الحاليّة وبالتالي تحديد عنصر <div> والفقرات الموجودة ضمنه:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>andSelf مثال عن التّابع</title>
<style>
p, div {
margin: 5px;
padding: 5px;
}
.border {
border: 2px solid red;
}
.background {
background: yellow;
}
.left, .right {
width: 45%;
float: left;
}
.right {
margin-left: 3%;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="left">
<p><strong>قبل استخدام التّابع <code>andSelf()</code></strong></p>
<div class="before-andself">
<p>الفقرة الأولى</p>
<p>الفقرة الثانية</p>
</div>
</div>
<div class="right">
<p><strong>بعد استخدام التّابع <code>andSelf()</code></strong></p>
<div class="after-andself">
<p>الفقرة الأولى</p>
<p>الفقرة الثانية</p>
</div>
</div>
<script>
$( "div.left, div.right" ).find( "div, div > p" ).addClass( "border" );
// المثال الأول
$( "div.before-andself" ).find( "p" ).addClass( "background" );
// المثال الثاني
$( "div.after-andself" ).find( "p" ).andSelf().addClass( "background" );
</script>
</body>
</html>