التابع .end() في jQuery
.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. عند عدم استخدام التسلسل، يمكننا عادةً استدعاء كائن سابق باسم متغير، لذلك لا نحتاج إلى معالجة المكدس. على الرغم من ذلك، يمكننا مع 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 طويلة ككتلة شيفرة برمجية مُهيكلة، مع توفير طرق تصفية توفر فتحات الكتل المتداخلة وتوابع end() تغلقها:
$( "ul.first" )
.find( ".foo" )
.css( "background-color", "red" )
.end()
.find( ".bar" )
.css( "background-color", "green" )
.end();
التابع end() الأخير غير ضروري، حيث أننا نرفض الكائن jQuery مباشرة بعد ذلك. ومع ذلك، عندما يتم كتابة الشيفرة بهذا الشكل، فإن end() توفر التماثل البصري والإحساس بالاكتمال، مما يجعل البرنامج أكثر قابلية للقراءة، على الأقل في أعين بعض المطورين، على حساب تأثير بسيط في الأداء باعتباره استدعاء زائد لدالة.
أمثلة
تحديد كل الفقرات، والعثور على عناصر <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>