آموزش جی کوئری – پیمایش هم نیا در جی کوئری

  • منتشر شده در تاریخ

آموزش جی کوئری

در بخش قبلی با پیمایش فرزندان در جی کوئری آشنا شدیم. در این قسمت از سری آموزش جی کوئری,  نحوه پیمایش هم نیا در جی کوئری را یاد می گیریم.

 

پیمایش هم نیا در جی کوئری

jQuery چندین متد مثل siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil() برای پیمایش طرفین در درخت DOM ارایه داده است.

 

متد siblings() جی کوئری

متد siblings() در جی کوئری برای دریافت هم نیا المان های انتخاب شده استفاده می شود.

مثال زیر هم نیاهای المان <p> که <h1> و <ul> است را با افزودن کلاس .highlight مشخص می کند.

بطور اختیاری می توانید یک یا چند سلکتور را به عنوان پارامتر در متد siblings() به منظور فیلتر جستجوی هم نیا ها, اضافه کنید.

مثال زیر border را به تمام هم نیا های <p> که المان های <ul> هستند, اضافه می کند.

 

متد next() جی کوئری

متد next() در جی کوئری برای دریافت هم نیایی که بلافاصله کنار المان های انتخاب شده است, استفاده می شود.

مثال زیر هم نیای المان <p> که <ul> است را با افزودن کلاس .highlight مشخص می کند.

 

متد nextAll() جی کوئری

متد nextAll() در جی کوئری برای دریافت تمام هم نیاهای بعد المان انتخاب شده استفاده می شود.

مثال زیر همه هم نیاهای المان <p> بعد از آن می آیند را با افزودن کلاس .highlight مشخص می کند.

 

متد nextUntil() جی کوئری

متد nextUntil() در جی کوئری برای دریافت تمام هم نیاهای بالا را که شامل المان مچ شده توسط سلکتور نیست استفاده می شود.

به زبان ساده تر تمام المان های هم نیا (خواهر و برادری) بعدی را که بین دو المان داده شده در یک سلسله مراتب DOM است را برگشت می دهد.

مثال زیر همه المان های خواهر و برداری المان <h1> را بجز <ul> هایلایت می کند که در این مثال هر دو <p> را هایلایت خواهد کرد.

 

متد prev() جی کوئری

متد prev() در جی کوئری برای دریافت هم نیایی که بلافاصله قبل از المان های انتخاب شده است, استفاده می شود.

مثال زیر هم نیای المان < ul> که <p> است را با افزودن کلاس .highlight مشخص می کند.

 

متد prevAll() جی کوئری

متد prevAll() در جی کوئری برای دریافت تمام هم نیاهای قبل المان انتخاب شده استفاده می شود.

مثال زیر همه هم نیاهای المان <ul> قبل از آن می آیند را با افزودن کلاس .highlight مشخص می کند.

 

متد prevUntil() جی کوئری

متد prevUntil() در جی کوئری برای دریافت تمام هم نیاهای قبل به بالا را که شامل المان مچ شده توسط سلکتور نیست استفاده می شود.

به زبان ساده تر تمام المان های هم نیا (خواهر و برادری) قبل المان را که بین دو المان داده شده در یک سلسله مراتب DOM است را برگشت می دهد.

مثال زیر همه المان های خواهر و برداری قبل المان <ul> را بجز <h1> هایلایت می کند که در این مثال هر دو <p> را هایلایت خواهد کرد.

 

امیدوارم در این بخش آموزش جی کوئری, از پیمایش هم نیا در جی کوئری نهایت استفاده را برده باشید.

در قسمت بعد نحوه فیلتر عناصر در جی کوئری را آموزش خواهیم داد.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
دیدگاه کاربران (۲)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. مازیار ۲۵ مرداد ۱۳۹۹

    کاش برای هر قسمت دمو هم میزاشتید

    پاسخ
    1. حسن شفیعی ۲۵ مرداد ۱۳۹۹

      متاسفانه این قسمت در سایت فعال نیست و میتونید جداگانه هر کدام رو کپی و اجرا بگیرید.

      پاسخ
دوره های آموزشی