jQuery遍历数组内子元素时始终只循环获取第一个元素如何解决？

问题原因 #

• 循环内选择器无范围限制：在.each()遍历每个.cart__item节点时，直接使用$(".cart__item--name")会全局搜索整个文档的匹配元素，jQuery默认返回第一个匹配元素的属性值，因此每次循环拿到的都是第一个商品的信息。
• dataLayer清空逻辑位置错误：将dataLayer.push({ ecommerce: null })放在循环内部，会导致每次遍历商品都清空之前的ecommerce对象，该操作只需在遍历开始前执行一次即可。

修正后的代码 #

$(".js-drawer-open-cart").on("click", function (event) {
  var items = [];
  // 全局仅清空一次旧的ecommerce数据
  dataLayer.push({ ecommerce: null }); 

  $(".cart__items .cart__item").each(function () {
    // 以当前遍历的.cart__item为根节点，查找内部的.cart__item--name元素
    const $currentItemName = $(this).find(".cart__item--name");
    let product_title = $currentItemName.attr("data-product-title");
    let product_id = $currentItemName.attr("data-product-id");
    let product_variant = $currentItemName.attr("data-product-variant");
    let product_quantity = $currentItemName.attr("data-product-quantity");
    let product_price = $currentItemName.attr("data-product-price");

    var item = {};
    item.item_name = product_title;
    item.price = product_price;
    item.item_brand = "El grande Porto";
    item.item_variant = product_variant;
    item.quantity = product_quantity;
    
    items.push(item);
  });

  dataLayer.push({
    event: "view_cart",
    ecommerce: {
      items: items,
    },
  });
});

内容的提问来源于stack exchange，提问作者Soufiane IBN