متدهای next()، prev() و closest() در jQuery
در توسعه وب، پیمایش DOM (Document Object Model) یکی از اساسی‌ترین مهارت‌هاست. jQuery با ارائه متدهای قدرتمند مانند next()، prev() و closest() این فرآیند را ساده‌تر کرده است. این متدها به شما کمک می‌کنند تا به راحتی بین عناصر صفحه حرکت کنید.
برای درک بهتر مفاهیم پایه‌ای jQuery، پیشنهاد می‌کنیم اینجا را بخوانید.
متد next()
این متد عنصر هم‌سطح بعدی را در DOM انتخاب می‌کند. به مثال زیر توجه کنید:
| کد HTML |
کد jQuery |
<div class="container">
<p>پاراگراف اول</p>
<p class="target">پاراگراف دوم</p>
<p>پاراگراف سوم</p>
</div>
|
$(".target").next().css("color", "red");
|
در این مثال، متن "پاراگراف سوم" به رنگ قرمز درمی‌آید زیرا next() عنصر بعدی هم‌سطح را انتخاب می‌کند.
متد prev()
برعکس next() عمل می‌کند و عنصر هم‌سطح قبلی را برمی‌گرداند:
- برای انتخاب عنصر قبل از عنصر جاری استفاده می‌شود
- می‌تواند با فیلترها ترکیب شود (مثلاً prev("p"))
- اگر عنصر قبلی وجود نداشته باشد، یک شیء jQuery خالی برمی‌گرداند
مثال کاربردی:
$("#item2").prev().addClass("highlight");
متد closest()
این متد منحصربه‌فرد است زیرا به سمت بالا در DOM حرکت می‌کند و اولین عنصر مطابق با سلکتور را پیدا می‌کند:
- از عنصر جاری شروع می‌کند
- به سمت والدها حرکت می‌کند
- اولین تطابق را برمی‌گرداند
مثال: $("span").closest("div") — نزدیک‌ترین div والد را پیدا می‌کند، حتی اگر چندین سطح بالاتر باشد.
تفاوت‌های کلیدی
| متد |
جهت پیمایش |
محدوده جستجو |
| next() |
به جلو (عنصر بعدی) |
هم‌سطح‌ها |
| prev() |
به عقب (عنصر قبلی) |
هم‌سطح‌ها |
| closest() |
به سمت بالا |
والدها |
این سه متد در کنار هم ابزارهای قدرتمندی برای پیمایش DOM ایجاد می‌کنند. با ترکیب هوشمندانه آن‌ها می‌توانید به هر بخشی از ساختار صفحه دسترسی پیدا کنید.
