التابع .addBack() في jQuery
.addBack( [selector ] )
القيمة المعادة
كائن jQuery.
الوصف
يُستخدَم التّابع .addBack() لإضافة مجموعة العناصر الموجودة سابقًا في المَكْدَس (stack) إلى المجموعة الحاليّة، مع إمكانيّة ترشيحها بشكل اختياري عن طريق مُحدِّد (selector).
.addBack( [selector ] )
أضيفت في الإصدار: 1.8
selector
مُحدِّد، ويُمثِّل سلسلة نصيّة تحتوي على تعبير المُحدِّد المطلوب مُطابقة مجموعة العناصر الحاليّة معه.
كما هو موصوف في صفحة التّابع .end() تحتفظ كائنات jQuery بمكدس داخلي يتتبع التغييرات إلى مجموعة العناصر المُوافقة. عندما يُستدعى أحد توابع التحكّم في DOM تُدفَع مجموعة العناصر الجديدة في المكدس. يُساعدنا التّابع .addBack() في حال كنّا نرغب بالاحتفاظ بمجموعة العناصر الموجودة سابقًا.
فلنأخذ هذا المثال عن صفحة تحتوي على قائمة بسيطة:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 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 demo</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>Before <code>addBack()</code></strong></p>
<div class="before-addback">
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
</div>
<div class="right">
<p><strong>After <code>addBack()</code></strong></p>
<div class="after-addback">
<p>First Paragraph</p>
<p>Second Paragraph</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>