$.each遍历数组次数异常：鸡尾酒DOM元素重复生成问题排查

嗨，我来帮你拆解下为什么会出现重复内容的问题，核心是你的代码里两个关键错误：

1. 错误地使用选择器创建元素 #

你的createObject函数里写的是：

$("div/div").addClass("cocktail").appendTo("main")

这里的$("div/div")是jQuery选择器，作用是选中页面上所有div标签下的子div，而不是创建新的div元素。第一次执行时，页面里可能没有符合条件的元素，所以这个操作根本没创建新的容器；后续循环时，它会选中之前生成的所有div子元素，重复给它们添加类并追加到main，这就导致了元素重复。

正确的写法应该是用$("<div>")来创建新的空div元素，还要把这个新创建的元素返回，方便后续操作只针对它：

var createObject = function(){
  // 创建新div，添加类后追加到main，同时返回这个元素的引用
  return $("<div>").addClass("cocktail").appendTo("main");
}

2. 全局选择器导致重复添加内容 #

在createImage和createIngredients函数里，你用了.appendTo(".cocktail")这类全局选择器——每次执行这些函数时，jQuery会选中页面上所有带有.cocktail类的元素，然后把图片、按钮、配料列表追加到每一个里面。比如第二次循环时，页面已经有1个.cocktail元素了，这时候不仅会给新创建的容器加内容，还会给第一个容器重复加；第三次循环时，会给前两个容器都重复加，最终就出现了你看到的重复内容。

解决方法是：把每次新创建的.cocktail容器引用传递给后续函数，让操作只针对当前这个容器，而不是全局所有同类元素。

修正后的完整代码： #

var cocktailsArray = [ 
  {image: "mojito.jpeg", ingredients:["lime", "rum", "sugar"]}, 
  {image: "pinacolada.jpeg", ingredients:["coconut liquer", "rum", "pineapple juice"]}, 
  {image: "tomcollins.jpeg", ingredients:["lemon", "gin", "sugar"]} 
];

var createObject = function(){
  return $("<div>").addClass("cocktail").appendTo("main");
};

var createImage = function(image, cocktailContainer){
  var img = $("<img>").addClass("cocktail-image").attr('src', image);
  img.appendTo(cocktailContainer); // 只追加到当前容器
};

var createIngredients = function(ingredients, cocktailContainer){
  // 添加按钮到当前容器
  $("<button/>").text("Ingredients").addClass("ingredients-button").appendTo(cocktailContainer);
  // 创建配料列表容器并追加到当前容器
  var ingredientsList = $("<div>").addClass("ingredients").appendTo(cocktailContainer);
  // 遍历配料添加到当前列表
  $.each(ingredients, function(key, ingredient){
    $("<li/>").text(ingredient).appendTo(ingredientsList);
  });
};

var addCocktail = function(picture, ingredients){
  var currentCocktail = createObject(); // 保存当前容器的引用
  createImage(picture, currentCocktail);
  createIngredients(ingredients, currentCocktail);
};

$(document).ready(function(){
  $.each(cocktailsArray, function(key, cocktail){
    addCocktail(cocktail.image, cocktail.ingredients);
  });
});

这样修改后，每次循环都会创建一个独立的.cocktail容器，所有后续的图片、按钮、配料都只会添加到这个新容器里，不会影响之前创建的内容，也就不会出现重复问题了。

内容的提问来源于stack exchange，提问作者L-R