الفرق بين المراجعتين لصفحة: «jQuery/end»
Khaled-yassin (نقاش | مساهمات) طلا ملخص تعديل |
لا ملخص تعديل |
||
| سطر 13: | سطر 13: | ||
لا يقبل هذا التابع أي وسائط. | لا يقبل هذا التابع أي وسائط. | ||
تعمل معظم توابع jQuery [[ | تعمل معظم توابع jQuery [[JQuery/traversing|للتنقل في شجرة DOM]] على نسخة من الكائن jQuery وتنتج كائنًا جديدًا آخر يطابق مجموعةً مختلفةً من عناصر DOM. عند حدوث ذلك، يبدو الأمر كما لو أن المجموعة الجديدة من العناصر تُدفَع إلى مكدس محفوظ داخل الكائن. ويدفع كل تابع ترشيح متعاقب عنصر جديد إلى المكدس. إذا كنا بحاجة إلى مجموعة من العناصر القديمة، فيمكننا استخدام <code>end()</code> لاستعادة المجموعات من المكدس. | ||
لنفترض أن لدينا قائمتين قصيرتين في صفحةٍ ما:<syntaxhighlight lang="html"> | لنفترض أن لدينا قائمتين قصيرتين في صفحةٍ ما:<syntaxhighlight lang="html"> | ||
| سطر 26: | سطر 26: | ||
<li class="bar">list item 3</li> | <li class="bar">list item 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"> | ||
| سطر 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"> | ||
| سطر 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]] | ||
مراجعة 08:04، 17 مايو 2018
.end()
القيمة المعادة
يُعيد كائنًا من النوع jQuery.
الوصف
ينهي هذا التابع أحدث عملية الترشيح في السلسلة الحالية ويُعيد مجموعة العناصر المتطابقة إلى حالتها السابقة.
.end()
أُضيف مع الإصدار: 1.0.
لا يقبل هذا التابع أي وسائط.
تعمل معظم توابع jQuery للتنقل في شجرة DOM على نسخة من الكائن jQuery وتنتج كائنًا جديدًا آخر يطابق مجموعةً مختلفةً من عناصر DOM. عند حدوث ذلك، يبدو الأمر كما لو أن المجموعة الجديدة من العناصر تُدفَع إلى مكدس محفوظ داخل الكائن. ويدفع كل تابع ترشيح متعاقب عنصر جديد إلى المكدس. إذا كنا بحاجة إلى مجموعة من العناصر القديمة، فيمكننا استخدام end() لاستعادة المجموعات من المكدس.
لنفترض أن لدينا قائمتين قصيرتين في صفحةٍ ما:
<ul class="first">
<li class="foo">list item 1</li>
<li>list item 2</li>
<li class="bar">list item 3</li>
</ul>
<ul class="second">
<li class="foo">list item 1</li>
<li>list item 2</li>
<li class="bar">list item 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 demo</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>
Hi there <span>how</span> are you <span>doing</span>?
</p>
<p>
This <span>span</span> is one of
several <span>spans</span> in this
<span>sentence</span>.
</p>
<div>
Tags in jQuery object initially: <b></b>
</div>
<div>
Tags in jQuery object after find: <b></b>
</div>
<div>
Tags in jQuery object after 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 demo</title>
<style>
p {
margin: 10px;
padding: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
<script>
$( "p" )
.find( "span" )
.end()
.css( "border", "2px red solid" );
</script>
</body>
</html>