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

  • آپدیت شده در تاریخ

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

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

 

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

جی کوئری چندین متد کارآمد مثل parent(), parents(), parentsUntil() که به شما امکان پیمایش به بالا در درخت DOM را چه بصورت تنها یا چندین مرحله را به سادگی می دهد.

به این روش می توانید والد یا دیگر اجداد المان را بصورت سلسله مراتب بدست آورید.

 

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

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

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

 

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

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

مثال زیر یک border را به اطراف المان های والد <li> که <ul>, <div>, <body> و <html> می باشد, اضافه می کند.

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

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

 

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

متد parentsUntil() در جی کوئری برای دریافت اجداد المان انتخاب شده استفاده می شود اما المان مچ شده توسط سلکتور را شامل نمی شود. به زبان ساده تر می توان گفت که همه اجداد المان ها که بین دو المان داده شده در سلسله مراتب DOM است را برگشت می دهد.

مثال زیر یک border را به اطراف همه اجداد المان های <li> بجز <html> اضافه می کند.

 

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

در قسمت بعد نحوه پیمایش فرزندان (children) در جی کوئری را آموزش خواهیم داد.

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

موفق باشید

حسن شفیعی توسعه دهنده وب و موبایل مدیر سایت علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. اگر نیاز به برنامه نویس برای انجام پروژه و نوشتن اسکریپت های سمت وب, اپلیکیشن های اندروید و ios, پیدا کردن راه حل توسعه و غیره داشتید حتما از طریق تماس با ما/ واتساپ/ تلگرام بهم پیام بدید. برایتهیه هاست مطمین و پرسرعت کلیک کنید
دیدگاه کاربران (۲)

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

  1. نیما ۲۹ بهمن ۱۳۹۸

    حسن جان متد closeset() که برای پیمایش والدها هست رو فراموش کردید

    پاسخ
    1. حسن شفیعی ۲۹ بهمن ۱۳۹۸

      سلام. ممنون از توجه شما.
      بله درست می فرمایید در بخش های مختلف پیمایش درختی متدهای اصلی را معرفی کردیم ولی اینجا از متد closeset() صحبتی نشده.
      کار این متد برگشت دادن اولین والد المان سلکت شده است که همین کار را به اینصورت هم می توانید انجام بدیم :

      $(‘li’).parents(‘ul:first’)

      موفق باشید.

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