jQuery 3.3

.end()




jquery

.end () الإرجاع: jQuery

الوصف: قم بإنهاء عملية التصفية الأحدث في السلسلة الحالية وإرجاع مجموعة العناصر المتطابقة إلى حالتها السابقة.

  • الإصدار المضاف: 1.0 .end()

    • هذه الطريقة لا تقبل أي حجج.

تعمل معظم طرق اجتياز DOM jQuery على مثيل كائن 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() الثاني 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() الأخيرة end() غير ضرورية ، حيث أننا نرفض الكائن jQuery مباشرة بعد ذلك. ومع ذلك ، عندما يتم كتابة الكود في هذا النموذج ، فإن end() توفر التماثل البصري والإحساس بالاكتمال - مما يجعل البرنامج ، على الأقل إلى أعين بعض المطورين ، أكثر قابلية للقراءة ، على حساب ضرب بسيط للأداء. هذا هو استدعاء وظيفة إضافية.

أمثلة:

يحدد كل الفقرات ، ويجد عناصر الامتداد داخلها ، ويعيد التحديد مرة أخرى إلى الفقرات.

<!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>

عرض:

يحدد كل الفقرات ، ويجد عناصر الامتداد داخلها ، ويعيد التحديد مرة أخرى إلى الفقرات.

<!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>

عرض: