متدهای each و map
پیمایش مجموعه عناصر با each() و ساخت آرایه جدید با map()
متد each()
متد each() روی هر عنصر مجموعه، یک تابع اجرا میکند — مثل حلقه for اما تمیزتر:
$(selector).each(function(index, element) {
// کد برای هر عنصر
});
- index: موقعیت عنصر (از صفر)
- element: خود عنصر DOM (داخل تابع،
thisهم همین است)
مثال ساده
// شمارهگذاری همه پاراگرافها
$("p").each(function(index) {
$(this).text((index + 1) + ". " + $(this).text());
});
// جمع قیمتهای جدول
var total = 0;
$(".price").each(function() {
total += parseInt($(this).text());
});
$("#total").text("جمع: " + total + " تومان");
توقف حلقه
با return false میتوانید حلقه را بشکنید و با return true به تکرار بعدی بروید:
// پیدا کردن اولین فیلد خالی و توقف
$("input").each(function(index) {
if ($(this).val() === "") {
alert("فیلد شماره " + (index + 1) + " خالی است!");
$(this).focus();
return false; // توقف حلقه
}
});
$.each برای آرایهها و اشیاء
نسخه سراسری $.each() روی آرایه و شیء هم کار میکند:
// پیمایش آرایه
$.each(["سیب", "موز", "پرتقال"], function(index, value) {
console.log(index + ": " + value);
});
// پیمایش شیء
$.each({ name: "علی", city: "تهران" }, function(key, value) {
console.log(key + " = " + value);
});
متد map()
متد map() روی هر عنصر تابع اجرا میکند و نتایج را در یک شیء jQuery جدید جمع میکند:
// گرفتن مقدار همه inputها
var values = $("input").map(function() {
return $(this).val();
}).get(); // تبدیل به آرایه جاوااسکریپت
console.log(values); // ["علی", "رضایی", "تهران"]
تفاوت each و map
| ویژگی | each() | map() |
|---|---|---|
| خروجی | هیچ (undefined) | شیء jQuery از نتایج |
| کاربرد | اجرای عمل روی هر عنصر | تبدیل/استخراج داده |
| return | false = توقف حلقه | مقدار = عضو جدید آرایه |
قانون ساده: اگر میخواهید کاری انجام شود (تغییر استایل، ارسال درخواست...) از
each؛ اگر میخواهید دادهای استخراج شود (لیست مقادیر، آرایه...) از map استفاده کنید.مثال کاربردی: جمع سبد خرید
// محاسبه جمع کل با each
function updateCartTotal() {
var total = 0;
$(".item").each(function() {
var price = parseInt($(this).data("price"));
var qty = parseInt($(this).find(".qty").val());
total += price * qty;
});
$("#cartTotal").text(total.toLocaleString() + " تومان");
}
جمعبندی
each()روی هر عنصر تابع اجرا میکند؛return falseحلقه را میشکند$.each()نسخه سراسری برای آرایه و شیءmap()نتایج را جمع میکند — برای استخراج داده.get()خروجی map را به آرایه واقعی تبدیل میکند
این مبحث بخشی از دوره آموزش کامل jQuery است.