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