متد size

متد متد size در نسخه های قدیمی jQuery راهی ساده برای شمارش عناصر پیدا شده با یک انتخابگر بود. این دستور به جای شمارش دستی، تعداد اعضای مجموعه jQuery را برمی گرداند. با این حال، اکنون بیشتر برای خواندن و نگهداری پروژه های قدیمی اهمیت دارد، نه برای توسعه تازه.

در ادامه، شکل نوشتن این متد، تفاوت آن با length، رفتار آن در حالت های مختلف و روش اصلاح کدهای قدیمی را بررسی می کنیم. دانستن این نکته ها به شما کمک می کند از خطاهای ناشی از نسخه jQuery جلوگیری کنید و کدی خواناتر و سازگارتر بنویسید.

این متد تعداد عناصری را برمی گرداند که انتخابگر شما در صفحه پیدا کرده است. برای نمونه، اگر انتخابگر $("li") با چهار عنصر فهرست مطابقت داشته باشد، نتیجه اجرای $("li").size() برابر با عدد چهار خواهد بود. مقدار خروجی یک عدد است و می توان آن را در شرط، پیام یا محاسبه دیگری به کار برد.

انتخابگر می تواند به یک نوع تگ، یک کلاس، یک شناسه یا ترکیبی از قواعد CSS اشاره کند. اگر انتخابگر هیچ عنصری را پیدا نکند، شمارش صفر خواهد بود. این رفتار برای بررسی وجود یک عنصر پیش از دسترسی به آن مفید است؛ البته در کدهای امروزی بهتر است همین کار را با length انجام دهید.

برای مثال، فرض کنید صفحه ای دارای چند پیوند با کلاس menu-link است. کد قدیمی می توانست تعداد آن ها را با $(".menu-link").size() مشخص کند. در نسخه های جدید، عبارت $(".menu-link").length همان تعداد را می دهد و نیازی به فراخوانی یک متد جداگانه ندارد.

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

$(selector).size();

در این عبارت، selector نام یک انتخابگر معتبر است؛ مثلاً "button" برای انتخاب دکمه ها یا ".card" برای انتخاب عناصر دارای کلاس card. پرانتزهای متد خالی هستند و پارامتری دریافت نمی کنند. نتیجه نهایی، تعداد اعضای مجموعه انتخاب شده است.

این دستور به تنهایی چیزی روی صفحه نمایش نمی دهد. برای دیدن خروجی باید آن را در جایی استفاده کنید؛ مثلاً در کنسول مرورگر، در یک شرط یا داخل یک پیام. همچنین اگر صفحه هنوز بارگذاری نشده باشد، ممکن است انتخابگر هنوز به عناصر مورد انتظار دسترسی نداشته باشد. بنابراین زمان اجرای کد هم اهمیت دارد.

از نظر نتیجه، size() و length تعداد اعضای مجموعه jQuery را گزارش می کنند. تفاوت مهم در شیوه دسترسی و پشتیبانی نسخه هاست: size() یک متد بود، اما length یک ویژگی است. برای همین، در کد جدید باید آن را بدون پرانتز بنویسید.

ویژگی length در نسخه های کنونی jQuery قابل استفاده است و جایگزین مستقیم و ساده ای برای کدهای قدیمی به شمار می رود. استفاده از آن همچنین با الگوی رایج جاوااسکریپت برای مجموعه ها هم خوانی دارد. اگر متدی که در یک آموزش قدیمی می بینید در پروژه شما کار نمی کند، نخست نسخه jQuery و سپس شکل استفاده از شمارش را بررسی کنید.

// روش قدیمی؛ در jQuery 3 به بعد موجود نیست
var countOld = $("li").size();

// روش پیشنهادی برای نسخه های جدید
var countNew = $("li").length;

به یاد داشته باشید که length را نباید مانند تابع صدا بزنید. نوشتن $("li").length() اشتباه است، چون ویژگی قابل خواندن است و تابع نیست. شکل درست آن $("li").length است.

در مثال ورودی، با کلیک روی یک دکمه تعداد عناصر li خوانده و با یک پیام هشدار نمایش داده می شود. در نسخه های قدیمی jQuery، این نمونه با size() اجرا می شد:

$("button").click(function() {
  alert($("li").size());
});

در این کد، رویداد کلیک به دکمه ها متصل شده است. پس از کلیک، انتخابگر $("li") عناصر فهرست را پیدا می کند و متد size() تعداد آن ها را به alert می دهد. اگر هیچ عنصر فهرستی وجود نداشته باشد، مقدار نمایش داده شده صفر است.

برای سازگار کردن همین نمونه با jQuery جدید، کافی است size() را با ویژگی length عوض کنید. بهتر است در نمونه های جدید، رویداد و انتخابگر نیز به اندازه نیاز محدود شوند؛ برای مثال، اگر فقط یک دکمه خاص مدنظر است، به جای انتخاب همه دکمه ها از شناسه یا کلاس اختصاصی استفاده کنید.

$("#count-button").on("click", function() {
  alert($("li").length);
});

این نسخه از روش رایج on() برای ثبت رویداد استفاده می کند و با انتخاب یک دکمه مشخص، از اجرای ناخواسته کد هنگام کلیک روی دکمه های دیگر جلوگیری می کند. البته باید در HTML صفحه، دکمه ای با شناسه count-button وجود داشته باشد.

پیش از استفاده از شمارش عناصر، مطمئن شوید انتخابگر با ساختار واقعی صفحه هماهنگ است. اشتباه تایپی در نام کلاس یا شناسه می تواند نتیجه صفر بدهد، حتی اگر عنصر مورد نظر در صفحه وجود داشته باشد. همچنین شناسه باید یکتا باشد؛ اگر هدف انتخاب چند عنصر است، معمولاً کلاس یا نام تگ انتخاب مناسب تری خواهد بود.

نکته دیگر زمان اجرای کد است. اگر جاوااسکریپت پیش از ساخته شدن عناصر اجرا شود، انتخابگر ممکن است مجموعه خالی دریافت کند. قرار دادن کد در رویداد آماده شدن صفحه یا اجرای فایل پس از محتوای HTML می تواند این مشکل را برطرف کند. در هر صورت، هنگام عیب یابی، مقدار length را در کنسول بررسی کنید تا ببینید چند عنصر پیدا شده است.

همچنین میان تعداد عناصر انتخاب شده و تعداد عناصر قابل مشاهده تفاوت وجود دارد. انتخابگر ممکن است عناصری را هم بشمارد که با CSS پنهان شده اند؛ شمارش ساده مجموعه، به خودی خود وضعیت نمایش را بررسی نمی کند. اگر فقط عناصر قابل مشاهده مدنظر هستند، باید انتخاب و شرط مربوط به نمایش را جداگانه در نظر بگیرید.

اگر پروژه ای دارید که از .size() استفاده می کند، ابتدا محل های فراخوانی این متد را در فایل های جاوااسکریپت پیدا کنید. سپس بررسی کنید هر فراخوانی روی چه انتخابگری انجام می شود و آیا به مقدار تعداد اعضا نیاز دارد یا نه. در بیشتر موارد، تغییر آن به .length کافی است؛ اما بهتر است پس از اصلاح، رفتار همان بخش را در صفحه نیز آزمایش کنید.

برای نمونه، عبارت $(".product").size() را می توان به $(".product").length تبدیل کرد. اما اگر کد به روش دیگری تعداد عناصر را محاسبه می کند یا تابعی سفارشی با نام مشابه دارد، جایگزینی خودکار ممکن است نتیجه نادرست داشته باشد. پس تغییر را با توجه به زمینه کد انجام دهید.

پس از تغییر، صفحه هایی را که از انتخابگر استفاده می کنند بررسی کنید؛ به ویژه حالت هایی که هیچ نتیجه ای ندارند یا تعداد عناصر در آن ها تغییر می کند. این آزمون ساده کمک می کند از خطاهای شرطی و پیام های نادرست جلوگیری شود. در تیم های توسعه نیز ثبت دلیل تغییر، نگهداری بعدی را آسان تر می کند.

متد size در jQuery در نسخه های قدیمی برای شمردن عناصر انتخاب شده استفاده می شد و در نمونه های آموزشی قدیمی هنوز دیده می شود. با این حال، این متد از نسخه ۱.۸ منسوخ شد و در jQuery ۳ به بعد وجود ندارد. برای نوشتن یا به روزرسانی کد، length انتخاب درست و سازگارتر است.

اگر کد قدیمی را می خوانید، کافی است بدانید که $("li").size() تعداد عناصر فهرست را برمی گرداند. اگر کد تازه می نویسید، همان هدف را با $("li").length انجام دهید، انتخابگر را با ساختار صفحه تطبیق دهید و زمان اجرای اسکریپت را هم در نظر بگیرید. این انتخاب کوچک به خوانایی و پایداری برنامه کمک می کند.