jQuery调用饮品API后嵌套循环append仅渲染最后一个索引项问题

安全阿岳

2026-9-28

代码问题修复说明

核心问题原因

内层配料循环中每次都会重新创建ul元素并覆盖ingList变量，循环结束后ingList仅保留最后一次循环生成的ul，因此只能看到最后一个配料
结构使用错误：多个配料应该作为li子元素放在同一个ul容器下，而不是每个配料单独创建一个ul

修正后完整代码

var queryURL = "https://thecocktaildb.com/api/json/v1/1/search.php?s=" + drinkName

$.ajax({
    url: queryURL,
    method: "GET"
}).then(function (response) {
    console.log(response);
    var results = response.drinks;
    for (var i = 0; i < results.length; i++) {
        console.log(results[i]);
        var eachDrink = results[i];
        var drinkDiv = $("<div>");
        var drinkName = results[i].strDrink;

        // 初始化配料列表容器，放到循环外
        var ingList = $("<ul>").text("Ingredients: ");
        for (var k = 1; k < 16; k++) {
            var currentIng = eachDrink['strIngredient' + k];
            // 非空判断，直接过滤无效空值
            if (currentIng) {
                console.log(currentIng);
                // 单个配料用li元素承载，追加到ul中
                var ingItem = $("<li>").text(currentIng);
                ingList.append(ingItem);
            }
        }

        var pOne = $("<p>").text("Drink name: " + drinkName);
        var drinkInstructions = results[i].strInstructions;
        var pTwo = $("<p>").text("Instructions: " + drinkInstructions);
        var drinkImage = $("<img>");
        drinkImage.attr("src", results[i].strDrinkThumb);

        drinkDiv.append(pOne);
        drinkDiv.append(ingList);
        drinkDiv.append(pTwo);
        drinkDiv.append(drinkImage);

        $("#drinks-view").append(drinkDiv);
    }
})