JavaScript/jQuery：高效收集动态元素数据并构建数组

$(document).on('click', '#saveBtn, #view-table', function() {
  $('#My_OrderCart_tbody tbody tr').each(function() {
    var data_id = $(this).find("dl[id^=dl]").data("place_id");
  });
  // 错误：data_id 在这里是未定义的，因为它在each循环的局部作用域内声明
  console.log(data_id); 
});

$(document).on('click', '#saveBtn, #view-table', function() {
    // 1. 在each循环外部声明一个空数组，用于存储收集到的ID
    let productIds = []; 

    // 2. 遍历购物车表格中的每一行
    $('#My_OrderCart_tbody tbody tr').each(function() {
        // 3. 在当前行中查找dl元素，并获取其data-place_id属性
        // 注意：原始HTML结构中dl没有id，但data-place_id在dl上。
        // 如果dl的id是动态生成的，且包含'dl'前缀，则find("dl[id^=dl]")是合适的。
        // 如果只是查找dl元素上的data-place_id，可以直接find("dl").data("place_id")
        let currentProductId = $(this).find("dl[data-place_id]").data("place_id");

        // 确保获取到了有效的ID，避免将undefined推入数组
        if (currentProductId) {
            // 4. 将获取到的ID推入productIds数组
            productIds.push(currentProductId);
        }
    });

    // 5. 循环结束后，productIds数组包含了所有收集到的ID
    console.log("所有产品ID:", productIds); 
    // 例如，访问第一个ID
    if (productIds.length > 0) {
        console.log("第一个产品ID:", productIds[0]); 
    }

    // 此时，productIds数组已准备好进行后续处理，例如发送到后端
    // sendDataToBackend(productIds);
});

$(document).on('click', '#saveBtn, #view-table', function() {
    // 1. 在each循环外部声明一个空数组，用于存储产品对象
    let cartItemsData = [];

    // 2. 遍历购物车表格中的每一行
    $('#My_OrderCart_tbody tbody tr').each(function() {
        const $row = $(this); // 缓存当前行jQuery对象

        // 3. 提取产品ID
        let productId = $row.find("dl[data-place_id]").data("place_id");

        // 如果没有有效的productId，则跳过当前行
        if (!productId) {
            return true; // 相当于continue，跳到下一个each迭代
        }

        // 提取数量和价格
        // 注意：原始HTML中数量和价格的id是Quan7557, Price7557等，
        // 这里的选择器需要根据productId动态构建。
        // 假设数量输入框的id是 'Quan' + productId，价格输入框的id是 'Price' + productId
        let quantity = $row.find(`input[data-id='${productId}'][type='number']`).val();
        let price = $row.find(`input[data-id='${productId}'][type='text']`).val();

        // 也可以直接获取元素本身，以备后续操作
        let productElement = $row; 

        // 4. 创建一个产品信息对象
        let productObj = {
            id: productId,
            quantity: parseInt(quantity) || 0, // 确保是数字
            price: parseFloat(price) || 0.00, // 确保是浮点数
            // 如果需要，还可以存储其他信息或元素引用
            // element: productElement 
        };

        // 5. 将产品对象推入cartItemsData数组
        cartItemsData.push(productObj);
    });

    // 循环结束后，cartItemsData数组包含了所有产品的详细信息
    console.log("所有购物车商品数据:", cartItemsData);
    // 例如，访问第一个商品的ID和数量
    if (cartItemsData.length > 0) {
        console.log("第一个商品ID:", cartItemsData[0].id);
        console.log("第一个商品数量:", cartItemsData[0].quantity);
    }

    // 此时，cartItemsData数组已准备好进行后续处理
    // 例如，将其转换为JSON字符串并通过AJAX发送到后端
    // $.ajax({
    //     url: "action.php",
    //     method: "POST",
    //     dataType: "json",
    //     data: {
    //         action: "updateCart",
    //         items: JSON.stringify(cartItemsData) // 将对象数组转换为JSON字符串
    //     },
    //     success: function(response) {
    //         console.log("后端响应:", response);
    //     }
    // });
});