متدهای each و map

پیمایش مجموعه عناصر با each() و ساخت آرایه جدید با map()

متد each()

متد each() روی هر عنصر مجموعه، یک تابع اجرا می‌کند — مثل حلقه for اما تمیزتر:

$(selector).each(function(index, element) {
    // کد برای هر عنصر
});

مثال ساده

// شماره‌گذاری همه پاراگراف‌ها
$("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 از نتایج
کاربرداجرای عمل روی هر عنصرتبدیل/استخراج داده
returnfalse = توقف حلقهمقدار = عضو جدید آرایه
قانون ساده: اگر می‌خواهید کاری انجام شود (تغییر استایل، ارسال درخواست...) از 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() + " تومان");
}

جمع‌بندی

این مبحث بخشی از دوره آموزش کامل jQuery است.

ابزارهای مرتبط