التابع .addBack() في jQuery
.addBack( [selector ] )
القيمة المعادة
كائن jQuery.
الوصف
يُستخدَم التّابع .addBack() لإضافة مجموعة العناصر الموجودة سابقًا في المَكْدَس (stack) إلى المجموعة الحاليّة، مع إمكانيّة ترشيحها بشكل اختياري عن طريق مُحدِّد (selector).
.addBack( [selector ] )
أضيفت في الإصدار 1.8.
selector
مُحدِّد، ويُمثِّل سلسلة نصيّة تحتوي على تعبير المُحدِّد المطلوب مُطابقة مجموعة العناصر الحاليّة معه.
كما هو موصوف في صفحة التّابع .end() تحتفظ كائنات jQuery بمكدس داخلي يتتبع التغييرات إلى مجموعة العناصر المُوافقة. عندما يُستدعى أحد توابع التحكّم في DOM فستُدفَع مجموعة العناصر الجديدة في المكدس. يُساعدنا التّابع .addBack() في حال كنّا نرغب بالاحتفاظ بمجموعة العناصر الموجودة سابقًا.
فلنأخذ هذا المثال عن صفحة تحتوي على قائمة بسيطة:
<ul>
<li>عنصر القائمة 1</li>
<li>عنصر القائمة 2</li>
<li class="third-item">عنصر القائمة 3</li>
<li>عنصر القائمة 4</li>
<li>عنصر القائمة 5</li>
</ul>
ينتج عن الشّيفرة التالية خلفيّة حمراء خلف عناصر القائمة الثّالث والرّابع والخامس:
$( "li.third-item" ).nextAll().addBack()
.css( "background-color", "red" );
في البداية يجد المُحدِّد المبدئي العنصر الثالث من القائمة، ممّا يُؤدِّي إلى تهيئة المكدس بمجموعة تحتوي على هذا العنصر فقط، ثمّ يدفع استدعاء التابع .nextAll() العناصر 4 و 5 إلى المكدس، وأخيرًا يدمج التّابع .addBack() هاتين المجموعتين معًا، مُنشِئًا بذلك كائن jQuery يُشير إلى العناصر الثّلاثة بحسب ترتيبها في المستند:
{[<li.third-item>,<li>,<li> ]}
أمثلة
يُؤدّي التّابع .addBack() لإضافة مجموعة عناصر DOM الموجودة سابقًا في المكدس إلى المجموعة الحاليّة. في المثال الأول من الشّيفرة التالية يحتوي المكدس على المجموعة النّاتجة عن .find("p")، وفي المثال الثّاني يُضيف التّابع .addBack() مجموعة العناصر الموجودة سابقًا في المكدس وهي في هذه الحالة $("div.after-addback") إلى المجموعة الحاليّة وبالتالي تحديد عنصر <div> والفقرات الموجودة ضمنه:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addBack مثال عن التابع</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>addBack()</code></strong></p>
<div class="before-addback">
<p>الفقرة الأولى</p>
<p>الفقرة الثانية</p>
</div>
</div>
<div class="right">
<p><strong>بعد استخدام <code>addBack()</code></strong></p>
<div class="after-addback">
<p>الفقرة الأولى</p>
<p>الفقرة الثانية</p>
</div>
</div>
<script>
$( "div.left, div.right" ).find( "div, div > p" ).addClass( "border" );
// المثال الأول
$( "div.before-addback" ).find( "p" ).addClass( "background" );
// المثال الثاني
$( "div.after-addback" ).find( "p" ).addBack().addClass( "background" );
</script>
</body>
</html>