如何基于Ajax数据创建独立的HTML地址动态卡片？

我明白你的问题啦——现在所有地址都挤在同一张卡片里，这是因为你一直在往同一个.location-list容器里追加内容，而这个容器本身就是卡片样式。咱们需要调整一下，让每个地址都生成一个独立的卡片容器，这样就能达到你要的效果了。

问题根源 #

原来的HTML里只存在一个.location-list容器，你在循环地址时不断把内容追加到这个容器里，自然所有地址都会显示在这同一张卡片中。

修改方案 #

1. 调整HTML结构

先把原本固定的.location-list去掉，只保留外层的卡片容器，我们会动态生成每个地址卡片：

<div class="card-container-clearfix"></div>

2. 保留原有CSS（无需修改）

你的.location-list样式已经是卡片的样式了，完全可以继续使用：

.location-list{ 
    float: left; 
    width:23%; 
    border: 1px solid #ccc; 
    background-color: #eee; 
    border-radius: 5px; 
    padding: 5px; 
    margin: 5px; 
    height:200px; 
}

3. 修改Ajax回调代码

核心是为每个地址创建一个新的.location-list卡片容器，再把地址内容放入其中，最后添加到外层容器里：

success: function(response){
    // 保留原有的用户基本信息处理逻辑
    $('#name').html(response.response.total_record[0].first_name+" "+response.response.total_record[0].last_name);
    $('#first').val(response.response.total_record[0].first_name);
    $('#last').val(response.response.total_record[0].last_name);
    $('#phone').val(response.response.total_record[0].phone_number);
    $('#alternative').val(response.response.total_record[0].alternative_number);
    $('#id').val(response.response.total_record[0]._id);

    // 获取外层卡片容器的DOM引用，避免重复查找
    const cardContainer = $('.card-container-clearfix');
    
    // 遍历每个地址，生成独立卡片
    $.each(response.response.total_record[0].address, function(i, item){
        // 创建一个新的卡片容器
        const newCard = $('<div class="location-list"></div>');
        // 向新卡片中插入地址内容（用模板字符串更易读）
        newCard.append(`
            <header class="header_title">
                <h3>Location:</h3>
            </header>
            <div class="location-detial">
                <p>
                    <span id="${item._id}">${item.address}</span>
                </p>
            </div>
        `);
        // 将新卡片添加到外层容器中
        cardContainer.append(newCard);
    });
}

关键修改点说明 #

• 动态生成卡片：不再复用同一个容器，而是为每个地址创建新的.location-list卡片
• 简化代码：直接使用循环参数item访问当前地址的属性，比response.response.total_record[0].address[i]更简洁
• 性能优化：提前获取外层容器的引用，减少重复的DOM查询操作

这样修改后，每个地址都会被渲染在独立的卡片里，完全符合你的预期效果啦！

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