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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط
ط (استبدال النص - 'JQuery' ب'jQuery')
 
(مراجعتان متوسطتان بواسطة مستخدمين اثنين آخرين غير معروضتين)
سطر 13: سطر 13:
 
لا يقبل هذا التابع أي وسائط.
 
لا يقبل هذا التابع أي وسائط.
  
−
تعمل معظم توابع jQuery [[jQuery/traversing|لاجتياز DOM]] على صورة مثيلة من كائن jQuery وتنتج واحدًا جديدًا، مطابقةً مجموعة مختلفة من عناصر DOM. عند حدوث ذلك، يبدو الأمر كما لو أن المجموعة الجديدة من العناصر تُدفَع إلى مكدس محفوظ داخل الكائن. ويدفع كل تابع ترشيح متعاقب عنصر جديد إلى المكدس. إذا كنا بحاجة إلى مجموعة من العناصر القديمة، فيمكننا استخدام <code>end()‎</code> لاستعادة المجموعات من المكدس.
+
تعمل معظم توابع jQuery [[jQuery/traversing|للتنقل في شجرة DOM]] على نسخة من الكائن jQuery وتنتج كائنًا جديدًا آخر يطابق مجموعةً مختلفةً من عناصر DOM. عند حدوث ذلك، يبدو الأمر كما لو أن المجموعة الجديدة من العناصر تُدفَع إلى مكدس محفوظ داخل الكائن. ويدفع كل تابع ترشيح متعاقب عنصر جديد إلى المكدس. إذا كنا بحاجة إلى مجموعة من العناصر القديمة، فيمكننا استخدام <code>end()‎</code> لاستعادة المجموعات من المكدس.
  
 
لنفترض أن لدينا قائمتين قصيرتين في صفحةٍ ما:<syntaxhighlight lang="html">
 
لنفترض أن لدينا قائمتين قصيرتين في صفحةٍ ما:<syntaxhighlight lang="html">
 
<ul class="first">
 
<ul class="first">
−
   <li class="foo">list item 1</li>
+
   <li class="foo">البند رقم 1</li>
−
   <li>list item 2</li>
+
   <li>البند رقم 2</li>
−
   <li class="bar">list item 3</li>
+
   <li class="bar">البند رقم 3</li>
 
</ul>
 
</ul>
 
<ul class="second">
 
<ul class="second">
−
   <li class="foo">list item 1</li>
+
   <li class="foo">البند رقم 1</li>
−
   <li>list item 2</li>
+
   <li>البند رقم 2</li>
−
   <li class="bar">list item 3</li>
+
   <li class="bar">البند رقم 3</li>
 
</ul>
 
</ul>
−
</syntaxhighlight>يفيد التابع <code>end()‎</code> في المقام الأول عند استغلال خصائص تسلسل jQuery. عند عدم استخدام التسلسل، يمكننا عادةً استدعاء كائن سابق باسم متغير، لذلك لا نحتاج إلى معالجة المكدس. على الرغم من ذلك، يمكننا مع <code>end()‎</code> إجراء كافة عمليات استدعاء التابع معًا:<syntaxhighlight lang="jquery">
+
</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>، ليس فقط داخل تلك القائمة <code><nowiki><li class="foo"></nowiki></code>، وتحول خلفية العناصر المطابقة إلى اللون الأخضر. النتيجة الصافية هي أن تكون خلفية العنصرين 1 و 3 من القائمة الأولى ملونة، ولا يوجد أي من العناصر من القائمة الثانية.
+
</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>end()‎</code> تغلقها:<syntaxhighlight lang="jquery">
+
يمكن تخيّل سلسلة 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()‎ الأخير غير ضروري، حيث أننا نرفض الكائن jQuery مباشرة بعد ذلك. ومع ذلك، عندما يتم كتابة الشيفرة بهذا الشكل، فإن end()‎ توفر التماثل البصري والإحساس بالاكتمال، مما يجعل البرنامج أكثر قابلية للقراءة، على الأقل في أعين بعض المطورين، على حساب تأثير بسيط في الأداء باعتباره استدعاء زائد لدالة.
+
</syntaxhighlight>التابع <code>end()‎</code> الأخير غير ضروري، حيث أننا نهمل الكائن jQuery مباشرة بعد ذلك، إذ لا نُسند القيمة المعادة منه إلى متغير لاستعماله لاحقًا. ومع ذلك، عندما يتم كتابة الشيفرة بهذا الشكل، فإن <code>end()‎</code> توفر التماثل البصري والإحساس بالاكتمال، مما يجعل البرنامج أكثر قابلية للقراءة، على الأقل في أعين بعض المطورين، على حساب تأثير بسيط في الأداء باعتباره استدعاء زائد لدالة.
  
 
=== أمثلة ===
 
=== أمثلة ===
−
تحديد كل الفقرات، والعثور على عناصر <code>[[HTML/span|<nowiki><span></nowiki>]]</code> داخلها، وإعادة التحديد مرة أخرى إلى الفقرات.<syntaxhighlight lang="html">
+
تحديد كل الفقرات <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 demo</title>
+
   <title>end مثال على التابع</title>
 
   <style>
 
   <style>
 
   p, div {
 
   p, div {
سطر 71: سطر 71:
 
   
 
   
 
<p>
 
<p>
−
   Hi there <span>how</span> are you <span>doing</span>?
+
   مرحبا <span>بك</span> كيف <span>حالك</span>?
 
</p>
 
</p>
 
   
 
   
 
<p>
 
<p>
−
   This <span>span</span> is one of
+
   عنصر <span>span</span> هذا هو أحد
−
   several <span>spans</span> in this
+
   عناصر <span>span</span> في هذه
−
   <span>sentence</span>.
+
   <span>الجملة</span>.
 
</p>
 
</p>
 
   
 
   
 
<div>
 
<div>
−
   Tags in jQuery object initially: <b></b>
+
   الوسوم في كائن jQuery عند البداية: <b></b>
 
</div>
 
</div>
 
   
 
   
 
<div>
 
<div>
−
  Tags in jQuery object after find: <b></b>
+
الوسوم في كائن jQuery بعد find: <b></b>
 
</div>
 
</div>
 
   
 
   
 
<div>
 
<div>
−
  Tags in jQuery object after end: <b></b>
+
الوسوم في كائن jQuery بعد end: <b></b>
 
</div>
 
</div>
 
   
 
   
سطر 115: سطر 115:
 
</body>
 
</body>
 
</html>
 
</html>
−
</syntaxhighlight>تحديد كل الفقرات، والعثور على عناصر <code>[[HTML/span|<nowiki><span></nowiki>]]</code> داخلها، وإعادة التحديد مرة أخرى إلى الفقرات.<syntaxhighlight lang="html">
+
</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 demo</title>
+
   <title>end مثال على التابع</title>
 
   <style>
 
   <style>
 
   p {
 
   p {
سطر 131: سطر 131:
 
<body>
 
<body>
 
   
 
   
−
<p><span>Hello</span>, how are you?</p>
+
<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>

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=jQuery/end&oldid=11160"