تتبع jQuery - أسلوب end()

دليل الترحيل jQuery

مثال

اختر جميع الفقرات، ابحث عن عناصر span داخل هذه الفقرات، ثم أرجعها إلى فقرات وأضف حواف حمراء بسمك 2 بكسل إلى الفقرات:

$("p").find("span").end().css("border", "2px red solid");

جرب ذلك بنفسك

التعريف والاستخدام

يؤدي أسلوب end() إلى إنهاء عملية التصفية الأخيرة في السلسلة الحالية ويقوم بإرجاع مجموعة العناصر إلى حالة سابقة.

اللغة

.end()

شرح مفصل

معظم طرق التتبع في jQuery تقوم بمعالجة نموذج مثيل 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>

مثال 1

يتم استخدامه بشكل رئيسي عند استخدام خاصية السلسلة في jQuery (سلسلة الأوامر)، حيث يكون jQuery مفيدًا جدًا.إذا لم يكن هناك استخدام للسلسلة، عادةً ما يتم استدعاء الجهاز السابق من خلال اسم المتغير، مما يعني أننا لا نحتاج إلى معالجة ال堆.

$('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 في القائمة الأولى يتم تعيين خلفيتها بلون ملون، بينما لا تتغير أي شيء في القائمة الثانية.

مثال 2

يمكن تصور هذا السلسلة الطويلة من jQuery كنصوص مبرمجة منظمة، حيث يتم فتح الكتل الداخلية باستخدام طريقة التصفية، واستخدام طريقة end() لإغلاق الكتل:

$('ul.first').find('.foo')
  .css('background-color', 'red')
.end().find('.bar')
  .css('background-color', 'green')
.end();

جرب ذلك بنفسك

آخر ذلك end() ليس ضروريًا لأننا سنقوم بإسقاط هذا الجهاز jQuery لاحقًا. ومع ذلك، إذا كتبنا الكود بهذه الطريقة، يمكن أن يوفر end() تناظرًا بصريةً، وكذلك شعورًا بتنظيم البرنامج، على الأقل بالنسبة للمطورين، لكن الثمن هو أن هناك خسارة بسيطة في الأداء بسبب إجراء المكالمات الإضافية.

دليل الترحيل jQuery