جستجوی jQuery - روش end()

مثال

تمام پاراگراف‌ها را انتخاب کنید، سپس عناصر span در این پاراگراف‌ها را پیدا کنید و آن‌ها را به پاراگراف‌ها تبدیل کنید و پاراگراف‌ها را به دو پیکسلی با لبه‌ی قرمز تبدیل کنید:

$("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 بسیار مفید است وقتی از ویژگی زنجیره‌ای (رشته فرمان‌ها) آن استفاده می‌کنید. اگر از زنجیره فرمان‌ها استفاده نکنید، معمولاً از نام متغیر برای فراخوانی جعبه ابزار قبلی استفاده می‌کنیم، بنابراین نیازی به عملکرد روی پشته نیست. اما با استفاده از end()، می‌توانیم همه فراخوانی‌های روش را به هم متصل کنیم:

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

شما خودتان امتحان کنید

این رشته فرمان‌ها برای پیدا کردن اولین لیست با نام کلاس foo و تنظیم رنگ پس‌زمینه آن به قرمز استفاده می‌شود. end() می‌تواند جعبه ابزار را به حالت اولیه قبل از فراخوانی find() بازگرداند، بنابراین find() دوم در داخل <ul class="first"> به دنبال '.bar' می‌گردد، نه در لیست <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() می‌تواند تقارن بصری و احساس ترتیب و نظم را فراهم کند، حداقل برای توسعه‌دهندگان راحت‌تر است، البته به قیمت کمی کاهش در عملکرد به دلیل استفاده از فراخوانی‌های اضافی.