الفرق بين المراجعتين لصفحة: «jQuery/end»
< jQuery
Khaled-yassin (نقاش | مساهمات) أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:التابع <code>.end()</code> في jQuery}}</noinclude> ==...' |
ط استبدال النص - 'JQuery' ب'jQuery' |
||
| (3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:التابع <code>.end()</code> في jQuery}}</noinclude> | <noinclude>{{DISPLAYTITLE:التابع <code>.end()</code> في jQuery}}</noinclude> | ||
== <code>.end()</code> == | == <code>.end()</code> == | ||
| سطر 13: | سطر 13: | ||
لا يقبل هذا التابع أي وسائط. | لا يقبل هذا التابع أي وسائط. | ||
تعمل معظم توابع jQuery [[jQuery/traversing| | تعمل معظم توابع jQuery [[jQuery/traversing|للتنقل في شجرة DOM]] على نسخة من الكائن jQuery وتنتج كائنًا جديدًا آخر يطابق مجموعةً مختلفةً من عناصر DOM. عند حدوث ذلك، يبدو الأمر كما لو أن المجموعة الجديدة من العناصر تُدفَع إلى مكدس محفوظ داخل الكائن. ويدفع كل تابع ترشيح متعاقب عنصر جديد إلى المكدس. إذا كنا بحاجة إلى مجموعة من العناصر القديمة، فيمكننا استخدام <code>end()</code> لاستعادة المجموعات من المكدس. | ||
لنفترض أن لدينا قائمتين قصيرتين في صفحةٍ ما:<syntaxhighlight lang="html"> | لنفترض أن لدينا قائمتين قصيرتين في صفحةٍ ما:<syntaxhighlight lang="html"> | ||
<ul class="first"> | <ul class="first"> | ||
<li class="foo"> | <li class="foo">البند رقم 1</li> | ||
<li> | <li>البند رقم 2</li> | ||
<li class="bar"> | <li class="bar">البند رقم 3</li> | ||
</ul> | </ul> | ||
<ul class="second"> | <ul class="second"> | ||
<li class="foo"> | <li class="foo">البند رقم 1</li> | ||
<li> | <li>البند رقم 2</li> | ||
<li class="bar"> | <li class="bar">البند رقم 3</li> | ||
</ul> | </ul> | ||
</syntaxhighlight>يفيد التابع <code>end()</code> في المقام الأول عند استغلال | </syntaxhighlight>يفيد التابع <code>end()</code> في المقام الأول عند استغلال إمكانية استخدام توابع jQuery كسلسلة (chain). عند عدم استخدام التسلسل، يمكننا عادةً استدعاء الكائن السابق باسم المتغير الذي خُزِّنَ فيه، لذلك لا نحتاج إلى إجراء عمليات معالجة على المكدس. على الرغم من ذلك، يمكننا مع <code>end()</code> إجراء كافة عمليات استدعاء التابع معًا:<syntaxhighlight lang="jquery"> | ||
$( "ul.first" ) | $( "ul.first" ) | ||
.find( ".foo" ) | .find( ".foo" ) | ||
| سطر 33: | سطر 33: | ||
.find( ".bar" ) | .find( ".bar" ) | ||
.css( "background-color", "green" ); | .css( "background-color", "green" ); | ||
</syntaxhighlight>تبحث هذه السلسلة عن العناصر باستخدام الصنف <code>foo</code> في القائمة الأولى فقط وتحول خلفياتها إلى اللون الأحمر. ثم تعيد <code>end()</code> الكائن إلى حالته قبل استدعاء التابع <code>[[jQuery/find|find()]]</code>، لذلك يبحث التابع find() الثاني عن '.bar' داخل <code><nowiki><ul class="first"></nowiki></code>، | </syntaxhighlight>تبحث هذه السلسلة عن العناصر باستخدام الصنف <code>foo</code> في القائمة الأولى فقط وتحول لون خلفياتها إلى اللون الأحمر. ثم تعيد <code>end()</code> الكائن إلى حالته قبل استدعاء التابع <code>[[jQuery/find|find()]]</code>، لذلك يبحث التابع <code>find()</code> الثاني عن الصنف <code>'.bar'</code> داخل العنصر <code><nowiki><ul class="first"></nowiki></code>، وليس داخل القائمة <code><nowiki><li class="foo"></nowiki></code> فقط، وتحول لون خلفية العناصر المطابقة إلى اللون الأخضر. النتيجة الصافية هي أن تكون خلفية العنصرين 1 و 3 من القائمة الأولى ملونة، ولن يلّون أي من عناصر القائمة الثانية. | ||
يمكن | يمكن تخيّل سلسلة jQuery طويلة ككتلة شيفرة برمجية مُهيكلة، وأنَّ توابع الترشيح (مثل <code>[[jQuery/find|find()]]</code>) تشير إلى بدء كتلة جديدة من الشيفرات، وتوابع <code>end()</code> تغلق تلك الكتل:<syntaxhighlight lang="jquery"> | ||
$( "ul.first" ) | $( "ul.first" ) | ||
.find( ".foo" ) | .find( ".foo" ) | ||
| سطر 43: | سطر 43: | ||
.css( "background-color", "green" ) | .css( "background-color", "green" ) | ||
.end(); | .end(); | ||
</syntaxhighlight>التابع end() الأخير غير ضروري، حيث أننا | </syntaxhighlight>التابع <code>end()</code> الأخير غير ضروري، حيث أننا نهمل الكائن jQuery مباشرة بعد ذلك، إذ لا نُسند القيمة المعادة منه إلى متغير لاستعماله لاحقًا. ومع ذلك، عندما يتم كتابة الشيفرة بهذا الشكل، فإن <code>end()</code> توفر التماثل البصري والإحساس بالاكتمال، مما يجعل البرنامج أكثر قابلية للقراءة، على الأقل في أعين بعض المطورين، على حساب تأثير بسيط في الأداء باعتباره استدعاء زائد لدالة. | ||
=== أمثلة === | === أمثلة === | ||
تحديد كل | تحديد كل الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code>، والعثور على عناصر <code>[[HTML/span|<nowiki><span></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>end | <title>end مثال على التابع</title> | ||
<style> | <style> | ||
p, div { | p, div { | ||
| سطر 71: | سطر 71: | ||
<p> | <p> | ||
مرحبا <span>بك</span> كيف <span>حالك</span>? | |||
</p> | </p> | ||
<p> | <p> | ||
عنصر <span>span</span> هذا هو أحد | |||
عناصر <span>span</span> في هذه | |||
<span> | <span>الجملة</span>. | ||
</p> | </p> | ||
<div> | <div> | ||
الوسوم في كائن jQuery عند البداية: <b></b> | |||
</div> | </div> | ||
<div> | <div> | ||
الوسوم في كائن jQuery بعد find: <b></b> | |||
</div> | </div> | ||
<div> | <div> | ||
الوسوم في كائن jQuery بعد end: <b></b> | |||
</div> | </div> | ||
| سطر 115: | سطر 115: | ||
</body> | </body> | ||
</html> | </html> | ||
</syntaxhighlight>تحديد كل الفقرات، والعثور على عناصر <code>[[HTML/span|<nowiki><span></nowiki>]]</code> داخلها، وإعادة التحديد مرة أخرى إلى الفقرات | </syntaxhighlight>تحديد كل الفقرات، والعثور على عناصر <code>[[HTML/span|<nowiki><span></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>end | <title>end مثال على التابع</title> | ||
<style> | <style> | ||
p { | p { | ||
| سطر 131: | سطر 131: | ||
<body> | <body> | ||
<p><span> | <p><span>مرحبا</span>، كيف حالك?</p> | ||
<script> | <script> | ||
| سطر 145: | سطر 145: | ||
== مصادر == | == مصادر == | ||
* [http://api.jquery.com/end/ صفحة المحدد .end() في توثيق jQuery الرسمي]. | * [http://api.jquery.com/end/ صفحة المحدد .end() في توثيق jQuery الرسمي]. | ||
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery Method]] | [[تصنيف:jQuery Method]] | ||
[[تصنيف:jQuery Traversing]] | [[تصنيف:jQuery Traversing]] | ||
المراجعة الحالية بتاريخ 09:21، 24 يونيو 2018
.end()
القيمة المعادة
يُعيد كائنًا من النوع jQuery.
الوصف
ينهي هذا التابع أحدث عملية الترشيح في السلسلة الحالية ويُعيد مجموعة العناصر المتطابقة إلى حالتها السابقة.
.end()
أُضيف مع الإصدار: 1.0.
لا يقبل هذا التابع أي وسائط.
تعمل معظم توابع jQuery للتنقل في شجرة DOM على نسخة من الكائن jQuery وتنتج كائنًا جديدًا آخر يطابق مجموعةً مختلفةً من عناصر DOM. عند حدوث ذلك، يبدو الأمر كما لو أن المجموعة الجديدة من العناصر تُدفَع إلى مكدس محفوظ داخل الكائن. ويدفع كل تابع ترشيح متعاقب عنصر جديد إلى المكدس. إذا كنا بحاجة إلى مجموعة من العناصر القديمة، فيمكننا استخدام end() لاستعادة المجموعات من المكدس.
لنفترض أن لدينا قائمتين قصيرتين في صفحةٍ ما:
<ul class="first">
<li class="foo">البند رقم 1</li>
<li>البند رقم 2</li>
<li class="bar">البند رقم 3</li>
</ul>
<ul class="second">
<li class="foo">البند رقم 1</li>
<li>البند رقم 2</li>
<li class="bar">البند رقم 3</li>
</ul>
يفيد التابع end() في المقام الأول عند استغلال إمكانية استخدام توابع jQuery كسلسلة (chain). عند عدم استخدام التسلسل، يمكننا عادةً استدعاء الكائن السابق باسم المتغير الذي خُزِّنَ فيه، لذلك لا نحتاج إلى إجراء عمليات معالجة على المكدس. على الرغم من ذلك، يمكننا مع end() إجراء كافة عمليات استدعاء التابع معًا:
$( "ul.first" )
.find( ".foo" )
.css( "background-color", "red" )
.end()
.find( ".bar" )
.css( "background-color", "green" );
تبحث هذه السلسلة عن العناصر باستخدام الصنف foo في القائمة الأولى فقط وتحول لون خلفياتها إلى اللون الأحمر. ثم تعيد end() الكائن إلى حالته قبل استدعاء التابع find()، لذلك يبحث التابع find() الثاني عن الصنف '.bar' داخل العنصر <ul class="first">، وليس داخل القائمة <li class="foo"> فقط، وتحول لون خلفية العناصر المطابقة إلى اللون الأخضر. النتيجة الصافية هي أن تكون خلفية العنصرين 1 و 3 من القائمة الأولى ملونة، ولن يلّون أي من عناصر القائمة الثانية.
يمكن تخيّل سلسلة jQuery طويلة ككتلة شيفرة برمجية مُهيكلة، وأنَّ توابع الترشيح (مثل find()) تشير إلى بدء كتلة جديدة من الشيفرات، وتوابع end() تغلق تلك الكتل:
$( "ul.first" )
.find( ".foo" )
.css( "background-color", "red" )
.end()
.find( ".bar" )
.css( "background-color", "green" )
.end();
التابع end() الأخير غير ضروري، حيث أننا نهمل الكائن jQuery مباشرة بعد ذلك، إذ لا نُسند القيمة المعادة منه إلى متغير لاستعماله لاحقًا. ومع ذلك، عندما يتم كتابة الشيفرة بهذا الشكل، فإن end() توفر التماثل البصري والإحساس بالاكتمال، مما يجعل البرنامج أكثر قابلية للقراءة، على الأقل في أعين بعض المطورين، على حساب تأثير بسيط في الأداء باعتباره استدعاء زائد لدالة.
أمثلة
تحديد كل الفقرات <p>، والعثور على عناصر <span> داخلها، وإعادة التحديد مرة أخرى إلى الفقرات:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>end مثال على التابع</title>
<style>
p, div {
margin: 1px;
padding: 1px;
font-weight: bold;
font-size: 16px;
}
div {
color: blue;
}
b {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>
مرحبا <span>بك</span> كيف <span>حالك</span>?
</p>
<p>
عنصر <span>span</span> هذا هو أحد
عناصر <span>span</span> في هذه
<span>الجملة</span>.
</p>
<div>
الوسوم في كائن jQuery عند البداية: <b></b>
</div>
<div>
الوسوم في كائن jQuery بعد find: <b></b>
</div>
<div>
الوسوم في كائن jQuery بعد end: <b></b>
</div>
<script>
jQuery.fn.showTags = function( n ) {
var tags = this.map(function() {
return this.tagName;
})
.get()
.join( ", " );
$( "b:eq( " + n + " )" ).text( tags );
return this;
};
$( "p" )
.showTags( 0 )
.find( "span" )
.showTags( 1 )
.css( "background", "yellow" )
.end()
.showTags( 2 )
.css( "font-style", "italic" );
</script>
</body>
</html>
تحديد كل الفقرات، والعثور على عناصر <span> داخلها، وإعادة التحديد مرة أخرى إلى الفقرات:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>end مثال على التابع</title>
<style>
p {
margin: 10px;
padding: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><span>مرحبا</span>، كيف حالك?</p>
<script>
$( "p" )
.find( "span" )
.end()
.css( "border", "2px red solid" );
</script>
</body>
</html>