الفرق بين المراجعتين لصفحة: «jQuery/addBack»

المراجعة الحالية بتاريخ 23:26، 1 يونيو 2018

`‎.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>

مصادر

صفحة التابع ‎.addBack()‎ في توثيق jQuery الرسمي.