jQuery如何正确追加元素并渲染GET请求返回的JSON数据？

问题原因排查 #

你现在遇到的undefined问题主要有两个错误：

1. 遍历逻辑错误：data.drinks是对象数组，使用for...in遍历数组时，迭代变量拿到的是数组的下标（数字字符串，如"0"、"1"），不是数组内的饮料对象，直接调用drink.strDrinkThumb当然会返回undefined。
2. DOM结构错误：img是自闭和元素，不支持嵌套子元素，你尝试把h5节点追加到img内的操作是无效的，h5应该和img同级，都作为card的子元素。

修正后的实现方案 #

下面的代码同时解决了你之前提的两个需求：使用唯一ID标识元素、先组装完整元素再挂载到页面，符合jQuery的最佳实践：

// 1. 先创建grid容器，暂不挂载到页面
const $grid = $('<div id="grid" class="d-flex flex-wrap justify-content-center"></div>');

// 2. 遍历饮料数组，用forEach更适配数组遍历场景
data.drinks.forEach(drink => {
    // 用返回的唯一idDrink生成元素唯一ID，避免冲突
    const drinkId = drink.idDrink;
    // 创建卡片元素，设置唯一ID
    const $card = $(`<div id="drink-card-${drinkId}" class="figure col-3 mx-2 mb-3 border border-4 border-white rounded-0"></div>`);
    // 创建图片元素，设置属性和唯一ID
    const $img = $(`<img id="drink-img-${drinkId}" class="card-img-top">`);
    $img.attr('src', drink.strDrinkThumb);
    // 创建名称元素，设置内容和唯一ID
    const $drinkName = $(`<h5 id="drink-name-${drinkId}" class="py-5 figure hover-class"></h5>`);
    $drinkName.text(drink.strDrink);
    
    // 3. 先把img、名称都组装到card里，再把card组装到grid，全程都是内存操作，没有触发页面重绘
    $card.append($img).append($drinkName);
    $grid.append($card);
})

// 4. 所有元素都组装完成后，一次性挂载到页面的results容器里，性能更好
$('#results').append($grid);

补充说明 #

• 唯一ID生成规则：用固定前缀加接口返回的唯一idDrink拼接即可，既保证全局唯一，后续需要单独操作某个饮料卡片时也可以通过ID前缀快速匹配，比如$('[id^="drink-card-"]')就能选中所有饮料卡片。
• 元素挂载顺序：jQuery创建的元素默认处于内存中，你完全可以先完成所有子元素的组装、属性设置之后，再挂载到页面已有的DOM节点上，这种方式比每创建一个元素就挂载一次性能高很多，不会频繁触发浏览器重排重绘。

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