50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

آموزش جی کوئری – فیلتر عناصر در جی کوئری

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

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

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

 

فیلتر عناصر در جی کوئری

jQuery چندین متد مثل filter(), first(), last(), eq(), slice(), has(), not() و .. را برای محدود کردن جستجو برای عناصر در درخت DOM ارایه داده است.

 

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

متد first() در جی کوئری برای فیلتر مجموعه ای از المان های همسان (matched) و برگشت دادن اولین از مجموعه استفاده می شود.

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

 

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

متد last() در جی کوئری برای فیلتر مجموعه ای از المان های همسان (matched) و برگشت دادن آخرین از مجموعه استفاده می شود.

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

 

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

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

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

نکته: ایندکس عرضه شده به متد eq() اشاره به موقعیت شروع شده از ۰ است به این معنی که ایندکس ۰ اولین المان, ایندکس ۱ دومین المان و … است. همچنین ایندکس اشاره به موقعیت المان داخل آبجکت جی کوئری دارد نه داخل درخت DOM .

همچنین می توانید یک عدد منفی را مشخص کنید. عدد منفی اشاره به شروع موقعیت از آخر مجموعه به جای شروع آن را دارد. برای مثال eq(-2) آخرین عنصر دوم در مجموعه ای از عناصر همسان را نشان می دهد.

 

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

متد filter() در جی کوئری, سلکتور یا یک تابع را به عنوان آرگومان برای فیلتر مجموعه از عناصر (elements) همسان بر اساس یک شاخص مشخص, دریافت می کند.

سلکتور یا تابع مشخص شده در متد filter() در برابر هر یک از عناصر در مجموعه عناصر همسان و همه عناصری که با المان انتخاب شده است یا پاس دادن تابع تست که شامل نتیجه می شود, تست می شود.

همانطور که قبلا گفته شد می توانید یک تابع را به متد filter() برای فیلتر مجموعه از عناصر همسان بر اساس شرایط خاص, پاس بدید.

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

بنابراین در این مثال فقط دومین و چهارمین آیتم لیست بدلیل شروع شدن از ۰ هایلایت می شوند.

 

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

متد has() در جی کوئری برای فیلتر مجموعه ای از عناصر همسان و برگشت دادن (return) المان هایی که دارای عناصر پسین هستند استفاده می شود.

مثال زیر همه المان های <li> که دارای <ul> هستند را هایلایت می کند.

 

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

متد not() در جی کوئری برای فیلتر مجموعه ای از عناصر همسان و برگشت دادن المان هایی که شرایط مشخص شده را ندارند استفاده می شود. این متد یک سلکتور یا تابع را به عنوان آرگومان دریافت می کند.

متد not() همانند filter() می تواند یک تابع را به عنوان آرگومان بگیرد, اما کاملا برعکس متد filter() عمل می کند. به اینصورت که المان های پاس داده شده به تابع تست حذف شده و بقیه المان ها به عنوان نتیجه برگشت داده می شوند.

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

در این مثال اولین و سومین آیتم از لیست هایلایت می شود.

 

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

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

این متد یک ایندکس عددی start (شروع) و end (پایان – آرگومان اختیاری) را دریافت می کند که start مشخص می کند که از چه موقعیتی المان ها انتخاب شوند و end نیز موقعیتی که انتخاب المان ها به پایان برسد را مشخص می کند.

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

همچنین می توانید یک ایندکس عددی منفی را مشخص کنید. یک عدد منفی, موقعیت شروع را از آخر مجموعه به عقب در نظر می گیرد.

برای مثال, slice(-2, -1) از آنجا که فقط این آیتم در محدوده بین آن است, فقط سومین آیتم لیست را هایلایت می کند.

 

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

در قسمت بعد Ajax در جی کوئری را آموزش خواهیم داد.

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

موفق باشید

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

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

NETPARADIS /
دیدگاه کاربران

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

    دوره های آموزشی
     ... صبر کنید! قبل از رفتن

    می خواهید یک فروشگاه آنلاین در تلگرام داشته باشید ؟

    برای دریافت و نصب سورس ربات تلگرام فروشگاه آنلاین روی دکمه زیر بزنید
    می خواهم فروشگاهم را در تلگرام راه اندازی کنم
    close-link