الفرق بين المراجعتين ل"jQuery/andSelf"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
 
(4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:التابع <code>‎.andSelf()‎‎</code>‎ في jQuery}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:التابع <code>‎.andSelf()‎‎</code>‎ في jQuery}}</noinclude>
 
+
== <code>‎.andSelf()‎</code> ==
= <code>‎.andSelf()‎</code> =
 
  
 
=== القيمة المعادة ===
 
=== القيمة المعادة ===
سطر 33: سطر 32:
 
$( "li.third-item" ).nextAll().andSelf()
 
$( "li.third-item" ).nextAll().andSelf()
 
 .css( "background-color", "red" );
 
 .css( "background-color", "red" );
</syntaxhighlight>في البداية يجد المُحدِّد المبدئي العنصر الثالث من القائمة، ممّا يُؤدِّي إلى تهيئة المَكدَس بمجموعة تحتوي فقط على هذا العنصر، ثمّ يدفع استدعاء التابع ‎<code>.nextAll()‎</code> العناصر 4 و 5 إلى المَكدَس، وأخيرًا يدمج التّابع <code>‎.andSelf()</code>‎‎‎ هاتين المجموعتين معًا، مُنشِئًا بذلك كائن jQuery يُشير إلى العناصر الثّلاثة بحسب ترتيبها في المستند:
+
</syntaxhighlight>في البداية يجد المُحدِّد المبدئي العنصر الثالث من القائمة، ممّا يُؤدِّي إلى تهيئة المَكدَس بمجموعة تحتوي فقط على هذا العنصر، ثمّ يدفع استدعاء التابع ‎<code>.nextAll()‎</code> العناصر 4 و 5 إلى المَكدَس، وأخيرًا يدمج التّابع <code>‎.andSelf()</code>‎‎‎ هاتين المجموعتين معًا، مُنشِئًا بذلك كائن jQuery يُشير إلى العناصر الثّلاثة بحسب ترتيبها في المستند:<syntaxhighlight lang="text">
 
+
{[<li.third-item>,<li>,<li> ]}
<code>{[<li.third-item>,<nowiki><li>,<li> ]}</nowiki></code>
+
</syntaxhighlight>
  
 
=== أمثلة ===
 
=== أمثلة ===
يُؤدّي التّابع <code>‎.andSelf()</code>‎ لإضافة مجموعة عناصر DOM الموجودة سابقًا في المكدس إلى المجموعة الحاليّة. في المثال الأول من الشّيفرة التالية يحتوي المكدس على المجموعة النّاتجة عن ‎.find("p")‎، وفي المثال الثّاني يُضيف التّابع ‎.andSelf()‎‎‎ مجموعة العناصر الموجودة سابقًا في المكدس وهي في هذه الحالة ‎‎$( "div.after-andself" )‎‎ إلى المجموعة الحاليّة وبالتالي تحديد عنصر [[HTML/div|‎<nowiki><div>‎</nowiki>]] والفقرات الموجودة ضمنه:
+
يُؤدّي التّابع <code>‎.andSelf()</code>‎ لإضافة مجموعة عناصر DOM الموجودة سابقًا في المَكدَس إلى المجموعة الحاليّة. في المثال الأول من الشّيفرة التالية يحتوي المَكدَس على المجموعة النّاتجة عن ‎<code>.find("p")‎</code>، وفي المثال الثّاني يُضيف التّابع <code>‎.andSelf()</code>‎‎‎ مجموعة العناصر الموجودة سابقًا في المكدس وهي في هذه الحالة <code>‎‎$( "div.after-andself" )‎‎</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">
 +
<title>andSelf مثال عن التّابع</title>
  
 <meta charset="utf-8">
+
<style>
 
 
 <title>andSelf مثال عن التّابع</title>
 
 
 
 <style>
 
 
 
 
 p, div {
 
 p, div {
 
 
   margin: 5px;
 
   margin: 5px;
 
 
   padding: 5px;
 
   padding: 5px;
 
 
 }
 
 }
  
 
 .border {
 
 .border {
 
 
   border: 2px solid red;
 
   border: 2px solid red;
 
 
 }
 
 }
  
 
 .background {
 
 .background {
 
 
   background: yellow;
 
   background: yellow;
 
 
 }
 
 }
  
 
 .left, .right {
 
 .left, .right {
 
 
   width: 45%;
 
   width: 45%;
 
 
   float: left;
 
   float: left;
 
 
 }
 
 }
  
 
 .right {
 
 .right {
 
 
   margin-left: 3%;
 
   margin-left: 3%;
 
 
 }
 
 }
 +
</style>
  
 </style>
+
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 
 
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 
 
 
 
</head>
 
</head>
  
 
<body>
 
<body>
 +
<div class="left">
 +
<p><strong>قبل استخدام التّابع <code>andSelf()</code></strong></p>
 +
 
 +
<div class="before-andself">
 +
<p>الفقرة الأولى</p>
 +
<p>الفقرة الثانية</p>
 +
</div>
  
<nowiki><div class="left"></nowiki>
+
</div>
 
 
 <nowiki><p><strong>قبل استخدام التّابع <code>andSelf()</code></nowiki><nowiki></strong></nowiki><nowiki></p></nowiki>
 
 
 
 <nowiki><div class="before-andself"></nowiki>
 
 
 
   <nowiki><p>الفقرة الأولى</p></nowiki>
 
 
 
   <nowiki><p>الفقرة الثانية</p></nowiki>
 
 
 
 <nowiki></div></nowiki>
 
 
 
<nowiki></div></nowiki>
 
  
<nowiki><div class="right"></nowiki>
+
<div class="right">
 +
<p><strong>بعد استخدام التّابع <code>andSelf()</code></strong></p> 
 +
 +
<div class="after-andself">
 +
<p>الفقرة الأولى</p>
 +
<p>الفقرة الثانية</p>
 +
</div>
  
 <nowiki><p><strong>بعد استخدام التّابع <code>andSelf()</code></nowiki><nowiki></strong></nowiki><nowiki></p></nowiki>
+
</div>
 
 
 <nowiki><div class="after-andself"></nowiki>
 
 
 
  <nowiki><p>الفقرة الأولى</p></nowiki>
 
 
 
  <nowiki><p>الفقرة الثانية</p></nowiki>
 
 
 
 <nowiki></div></nowiki>
 
 
 
<nowiki></div></nowiki>
 
  
 
<script>
 
<script>
 
 
$( "div.left, div.right" ).find( "div, div > p" ).addClass( "border" );
 
$( "div.left, div.right" ).find( "div, div > p" ).addClass( "border" );
  
// First Example
+
// المثال الأول
  
 
$( "div.before-andself" ).find( "p" ).addClass( "background" );
 
$( "div.before-andself" ).find( "p" ).addClass( "background" );
  
// Second Example
+
// المثال الثاني
  
 
$( "div.after-andself" ).find( "p" ).andSelf().addClass( "background" );
 
$( "div.after-andself" ).find( "p" ).andSelf().addClass( "background" );
سطر 139: سطر 108:
  
 
</html>
 
</html>
 +
 +
 +
</syntaxhighlight>
  
 
== مصادر ==
 
== مصادر ==
* صفحة التابع ‎‎.andSelf()‎ في توثيق jQuery الرسمي.
+
* [http://api.jquery.com/andSelf/ صفحة التابع ‎‎.andSelf()‎ في توثيق jQuery الرسمي].
 +
[[تصنيف:jQuery]]
 +
[[تصنيف:jQuery Method]]
 +
[[تصنيف:jQuery Deprecated]]

المراجعة الحالية بتاريخ 09:25، 12 مايو 2018

‎.andSelf()‎

القيمة المعادة

كائن jQuery.

أُهمِل هذا التّابع في الإصدار: 1.8، وأُزيل في الإصدار: 3.0.

الوصف

يُستخدَم التّابع ‎.andSelf()‎ في إضافة مجموعة العناصر الموجودة سابقًا في المَكدَس (stack) إلى المجموعة الحاليّة.

‎.andSelf()‎

أُضيفت في الإصدار: 1.2.

لا يقبل هذا التابع أيّة وسائط.

ملاحظة: أصبح هذا التّابع مهملًا، ويُعتبَر الآن اسمًا بديلًا (alias) للتابع ‎.addBack()‎ والذي يجب استخدامه في إصدار jQuery 1.8 فما بعد.

كما هو موصوف في صفحة التّابع ‎.end()‎ تحتفظ كائنات jQuery بمَكدَس داخلي يتتبّع التغييرات إلى مجموعة العناصر المُوافقة. عندما يُستدعى أحد توابع التحكّم في DOM تُدفَع مجموعة العناصر الجديدة في المكدس. يُساعدنا التّابع ‎.andSelf()‎ إن كُنّا نرغب بالاحتفاظ بمجموعة العناصر الموجودة سابقًا.

فلنأخذ مثالًا عن صفحة تحتوي على قائمة بسيطة:

<ul>
 <li>العنصر 1 في القائمة</li>
 <li>العنصر 2 في القائمة</li>
 <li class="third-item">العنصر 3 في القائمة</li>
 <li>العنصر 4 في القائمة</li>
 <li>العنصر 5 في القائمة</li>
</ul>

ينتج عن الشّيفرة التالية خلفيّة حمراء خلف عناصر القائمة الثّالث والرّابع والخامس:

$( "li.third-item" ).nextAll().andSelf()
 .css( "background-color", "red" );

في البداية يجد المُحدِّد المبدئي العنصر الثالث من القائمة، ممّا يُؤدِّي إلى تهيئة المَكدَس بمجموعة تحتوي فقط على هذا العنصر، ثمّ يدفع استدعاء التابع ‎.nextAll()‎ العناصر 4 و 5 إلى المَكدَس، وأخيرًا يدمج التّابع ‎.andSelf()‎‎‎ هاتين المجموعتين معًا، مُنشِئًا بذلك كائن jQuery يُشير إلى العناصر الثّلاثة بحسب ترتيبها في المستند:

{[<li.third-item>,<li>,<li> ]}

أمثلة

يُؤدّي التّابع ‎.andSelf()‎ لإضافة مجموعة عناصر DOM الموجودة سابقًا في المَكدَس إلى المجموعة الحاليّة. في المثال الأول من الشّيفرة التالية يحتوي المَكدَس على المجموعة النّاتجة عن ‎.find("p")‎، وفي المثال الثّاني يُضيف التّابع ‎.andSelf()‎‎‎ مجموعة العناصر الموجودة سابقًا في المكدس وهي في هذه الحالة ‎‎$( "div.after-andself" )‎‎ إلى المجموعة الحاليّة وبالتالي تحديد عنصر ‎<div>‎ والفقرات الموجودة ضمنه:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>andSelf مثال عن التّابع</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>andSelf()</code></strong></p>
 
	<div class="before-andself">
		<p>الفقرة الأولى</p>
		<p>الفقرة الثانية</p>
	</div>

</div>

<div class="right">
	<p><strong>بعد استخدام التّابع <code>andSelf()</code></strong></p> 
	
	<div class="after-andself">
		<p>الفقرة الأولى</p>
		<p>الفقرة الثانية</p>
	</div>

</div>

<script>
$( "div.left, div.right" ).find( "div, div > p" ).addClass( "border" );

// المثال الأول

$( "div.before-andself" ).find( "p" ).addClass( "background" );

// المثال الثاني

$( "div.after-andself" ).find( "p" ).andSelf().addClass( "background" );

</script>

</body>

</html>

مصادر