ترفندهای پیشرفته jQuery (قسمت 27)

- visibility ٠ mode_comment

در این قسمت با ادامه ترفندهای پیشرفته jQuery در خدمت شما هستیم. jquery trickshot

موضوع چهارم : ماهر شدن در JQuery

ترفند 51 : کار کردن با متد grep

همونطور که jQuery قدرت زیادی برای دستکاری کردن در Dom داره و همچنین کار با Event هارو راحتتر کرده ، توابع مفید و کاربردی نیز برای کار با آرایه ها در خودش قرار داده. یکی از اون توابع grep هست که میاد با استفاده از callback المنتهای آرایه رو فیلتر میکنه. برای روشن شدن موضوع مثالی رو براتون میزنم:

کدهای JS:

اول یک متغیر تعریف میکنیم و یک آرایه رو به اون نسبت میدیم:

اگر اعداد قرار داده شده در آرایه بالا ، روزهای یک ماه باشن ، چه روزهایی یکشنبه خواهد بود؟

با استفاده از متد grep میشه فیلتر قرار داده و کاری کنیم که به پاسخ سوالمون برسیم:

میبینید که در ابتدا یک متغیر تعریف کردیم و میخایم عددهایی که در آرایه روز یکشنبه رو نشون میدن مشخص کنیم. برای این کار از متد grep استفاده میکنیم. به عنوان پارامتر اول آرایه تعریف شده رو قرار میدیم و بعد از اون یک تابع قرار میدیم که نقش callback داره و به ازای هر عضو آرایه یکبار اجرا میشه. در هر بار اجرا تابع یک متغیر از نوع زمان ایجاد میشه و اون المنت جاری آرایه درونش قرار داده میشه و بعد از اون یک شرط در مقابل return قرار میگیره. اگر متد getDay برابر با 0 باشه به این معنی هست که روز یکشنبه هست و این عبارت منطقی برابر با true خواهد شد. در هر بار تکرار تابع callback ، هر المنتی که نتیجه true رو برگشت بده ، از فیلتر عبور میکنه و در آرایه sundays قرار میگیره. حالا متغیر sundays رو چاپ میکنیم تا نتیجه رو ببینیم:

میبینید که در ابتدا با استفاده از متد join ، المنتهای موجود در آرایه sundays رو به رشته تبدیل کردیم و بعد از اون ، در Console چاپش کردیم. خروجی:

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

ترفند 52 : مرتب کردن المنتها در یک مجموعه jQuery

این ترفند حول متد sort موجود در jQuery میچرخه. کار کردن با این ترفند شباهت زیادی با مرتب کردن آرایه ها داره. مثال زیر موضوع رو براتون روشنتر میکنه:

کدهای HTML:

میبینید که یک دکمه و یک لیست قرار دادیم. میخایم کاری کنیم که با کلیک بر روی دکمه بصورت صعودی اعداد مرتب بشن.

کدهای JS:

در ابتدا یک رویداد کلیک برای دکمه مورد نظر تعریف کردیم. یک متغیر تعریف کردیم و تمام li هارو به اون نسبت دادیم. بعد از اون برای همه اونا متد sort رو فراخوانی کردیم. این متد باعث میشه که دو عضو دو عضو ، اعضا رو به تابع درونش پاس بده. درون تابع در ابتدا اعدادی که درون li بصورت رشته ای هستن رو به عدد صحیح تبدیل میکنه. این کار برای اینه که مرتب کردنمون صحیح بشه و صعودی بشه. بعدش میاد دو به دو المنتها رو بررسی میکنه و اونی که بزرگتره رو بالاتر قرار میده. این کار برای همه اعضا تکرار میشه تا نهایت همه مرتب بشن. در نهایت هم با استفاده از متد appendTo نتیجه رو در ul قرار دادیم.

اگر اعداد رو به حالت صحیح تبدیل نکنیم ، مرتب کردن بصورت رشته ای میشه که زیاد جالب نیس.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

comment دیدگاه کاربران
حمید رضا مصطفی زاده

سلام و دست مریزاد مهندس بابت این نکات jquey
منتظر pdf مطالب هستیم.
آقای اسفندیاری بیشتر مطالبت شما UI بود
شما که دارید زحمت میکشید به نظرتون وقتش نیست که برید سمت server؟
واقعا جای مطالب mvc تو سایت شما خالی هست….
تشکر

سلام خواهش میکنم
PDF هم به زودی قرار داده میشه
در مورد MVC هم شاید مطالبی قرار داده بشه.
فعلا یکم سرم شلوغه و بنظرم اگه اول UI قوی باشید بعد برید سمت سرور خیلی بهتره
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.