آشنایی با متدهای siblings()، nextAll() و prevAll() در jQuery
در توسعه وب، مدیریت و دستکاری عناصر DOM یکی از اساسی‌ترین نیازهاست. jQuery با ارائه متدهای قدرتمند مانند siblings()، nextAll() و prevAll() این فرآیند را ساده‌تر کرده است. این متدها به شما امکان می‌دهند عناصر هم‌سطح (خواهر و برادر) را در ساختار DOM پیدا و مدیریت کنید.
متد siblings()
متد siblings() تمام عناصر هم‌سطح با عنصر انتخاب شده را برمی‌گرداند. این متد یک انتخاب‌گر اختیاری می‌پذیرد که می‌توانید برای فیلتر کردن نتایج استفاده کنید:
- کاربرد اصلی: انتخاب تمام عناصر هم‌سطح
- پارامتر اختیاری: فیلتر بر اساس انتخاب‌گر CSS
- مثال:
$("li.active").siblings()
| متد |
توضیح |
| siblings() |
تمام عناصر هم‌سطح را برمی‌گرداند |
| siblings(".class") |
فقط هم‌سطح‌های دارای کلاس مشخص |
متد nextAll()
متد nextAll() تمام عناصر هم‌سطح بعد از عنصر انتخاب شده را در ساختار DOM برمی‌گرداند. این متد برای انتخاب گروهی عناصر بعدی بسیار مفید است:
تفاوت اصلی بین next() و nextAll() این است که next() فقط اولین عنصر بعدی را برمی‌گرداند، در حالی که nextAll() تمام عناصر بعدی را انتخاب می‌کند.
- مثال ساده:
$("div:first").nextAll()
- مثال فیلتر شده:
$("li.active").nextAll(".highlight")
متد prevAll()
متد prevAll() مکمل nextAll() است و تمام عناصر هم‌سطح قبل از عنصر انتخاب شده را برمی‌گرداند:
نکته مهم: ترتیب عناصر در مجموعه بازگشتی prevAll() بر اساس موقعیت آن‌ها در DOM است (از نزدیک‌ترین به دورترین).
برای یادگیری عمیق‌تر و مثال‌های کاربردی از این متدها، می‌توانید اینجا را چک کنید.
مقایسه عملکرد متدها
| متد |
جهت جستجو |
محدوده |
| siblings() |
همه جهات |
تمام هم‌سطح‌ها |
| nextAll() |
به جلو |
تمام عناصر بعدی |
| prevAll() |
به عقب |
تمام عناصر قبلی |
این متدها هنگام کار با لیست‌ها، منوها و هر ساختار تکراری در DOM بسیار کاربردی هستند. با ترکیب این متدها با سایر قابلیت‌های jQuery می‌توانید کنترل کاملی بر عناصر صفحه داشته باشید.
