التابع .end() في jQuery
.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>