الفرق بين المراجعتين لصفحة: «jQuery/addBack»
Kinan-mawed (نقاش | مساهمات) أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:التابع <code>.addBack()</code> في jQuery}}</noinclude>' |
Kinan-mawed (نقاش | مساهمات) لا ملخص تعديل |
||
| (3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:التابع <code>.addBack()</code> في jQuery}}</noinclude> | <noinclude>{{DISPLAYTITLE:التابع <code>.addBack()</code> في jQuery}}</noinclude> | ||
== <code>.addBack( [selector ] )</code> == | |||
=== القيمة المعادة === | |||
كائن [[jQuery/jQuery|jQuery]]. | |||
=== الوصف === | |||
يُستخدَم التّابع <code>.addBack()</code> لإضافة مجموعة العناصر الموجودة سابقًا في المَكْدَس (stack) إلى المجموعة الحاليّة، مع إمكانيّة ترشيحها بشكل اختياري عن طريق مُحدِّد (selector). | |||
=== <code>.addBack( [selector ] )</code> === | |||
أضيفت في الإصدار 1.8. | |||
==== <code>selector</code> ==== | |||
مُحدِّد، ويُمثِّل سلسلة نصيّة تحتوي على تعبير المُحدِّد المطلوب مُطابقة مجموعة العناصر الحاليّة معه. | |||
كما هو موصوف في صفحة التّابع <code>[[jQuery/end|.end()]]</code> تحتفظ كائنات jQuery بمكدس داخلي يتتبع التغييرات إلى مجموعة العناصر المُوافقة. عندما يُستدعى أحد توابع التحكّم في DOM فستُدفَع مجموعة العناصر الجديدة في المكدس. يُساعدنا التّابع <code>.addBack()</code> في حال كنّا نرغب بالاحتفاظ بمجموعة العناصر الموجودة سابقًا. | |||
فلنأخذ هذا المثال عن صفحة تحتوي على قائمة بسيطة:<syntaxhighlight lang="html"> | |||
<ul> | |||
<li>عنصر القائمة 1</li> | |||
<li>عنصر القائمة 2</li> | |||
<li class="third-item">عنصر القائمة 3</li> | |||
<li>عنصر القائمة 4</li> | |||
<li>عنصر القائمة 5</li> | |||
</ul> | |||
</syntaxhighlight>ينتج عن الشّيفرة التالية خلفيّة حمراء خلف عناصر القائمة الثّالث والرّابع والخامس:<syntaxhighlight lang="javascript"> | |||
$( "li.third-item" ).nextAll().addBack() | |||
.css( "background-color", "red" ); | |||
</syntaxhighlight>في البداية يجد المُحدِّد المبدئي العنصر الثالث من القائمة، ممّا يُؤدِّي إلى تهيئة المكدس بمجموعة تحتوي على هذا العنصر فقط، ثمّ يدفع استدعاء التابع <code>[[jQuery/nextAll|.nextAll()]]</code> العناصر 4 و 5 إلى المكدس، وأخيرًا يدمج التّابع <code>.addBack()</code> هاتين المجموعتين معًا، مُنشِئًا بذلك كائن jQuery يُشير إلى العناصر الثّلاثة بحسب ترتيبها في المستند:<syntaxhighlight lang="html"> | |||
{[<li.third-item>,<li>,<li> ]} | |||
</syntaxhighlight> | |||
=== أمثلة === | |||
يُؤدّي التّابع <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> | |||
<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> | |||
</syntaxhighlight> | |||
== مصادر == | |||
* [http://api.jquery.com/addBack/ صفحة التابع .addBack() في توثيق jQuery الرسمي]. | |||
[[تصنيف:jQuery]] | |||
[[تصنيف:jQuery Method]] | |||
[[تصنيف:jQuery Traversing]] | |||
المراجعة الحالية بتاريخ 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>