如何通过jQuery循环动态生成多份用户资料Div，更新JSP页面DOM

云上老周

2026-5-13

如何动态生成多个用户资料卡片展示不同用户数据？

问题描述

我有一个JSP页面，原本只能在单个Div中展示单份用户资料数据，现在想要改成像截图那样，生成多个独立的Div卡片分别展示不同用户的信息。现有代码如下：

原JSP结构代码：

<div class="userProfileDetails">
    <div id="ignorecrossbefore_1" style="display: none">
        <div class="posrelative">
            <img width="150" height="150" border="0" src="https://content.screencast.com/users/RaviKumar87/folders/Jing/media/fd8c7ca4-1d71-483c-8b3a-8fa67e537c23/2019-06-19_1908.png">
        </div>
        <div class="fleft mediumtxt" style="width: 900px; margin-left: 177px; margin-top: -142px;">
            <div class="location-icon clr5 padb10" alt="Location" title="Location">
                <h4>
                    <span class="input-data" id="searchProfileName"></span>
                </h4>
            </div>
            <ul>
                <li>
                    <span class="input-field">City </span>
                    <span class="input-data" id="cityName"></span>
                </li>
                <li>
                    <span class="input-field">Age </span>
                    <span class="input-data" id="age"></span>
                </li>
                <li>
                    <span class="input-field">Height </span>
                    <span class="input-data" id="heigth"></span>
                </li>
                <li>
                    <span class="input-field">Caste </span>
                    <span class="input-data" id="caste"></span>
                </li>
                <li>
                    <span class="input-field">Education </span>
                    <span class="input-data" id="eudcation"></span>
                </li>
                <li>
                    <span class="input-field">Occupation </span>
                    <span class="input-data" id="occupation"></span>
                </li>
            </ul>
            <a class="btn btn-primary btn-sm search-btn-padding" style="color: white;" onclick="searchProfile()">View Profile</a>
        </div>
    </div>
</div>

原jQuery成功回调代码：

success: function(result){
    $('#ignorecrossbefore_1').show();
    $(result).each(function(i,element){
        $('#searchProfileName').html(element.userBirthName);
        $('#cityName').html(element.presetnAddressCity);
        $('#age').html(element.userAge);
        $('#heigth').html(element.userheight);
        $('#caste').html(element.userCasteName);
        $('#eudcation').html(element.highestEducation);
        $('#occupation').html(element.employedIn);
    });
},

当前代码仅能展示单份用户资料，请问如何修改实现生成多个Div分别展示不同用户数据？

解决方案

核心问题是你现在的代码每次循环都会覆盖同一个ID元素的内容，所以最终只会显示最后一条用户数据。要实现多卡片展示，我们可以把用户卡片做成可复用的模板，然后循环生成每个用户的独立卡片，具体步骤如下：

1. 提取用户卡片为可复用模板

首先把单个用户的卡片结构改成模板，移除重复的ID（避免ID冲突），改用类选择器或者相对查找：

<!-- 新增模板，放在页面合适位置 -->
<script type="text/template" id="userProfileTemplate">
    <div class="userProfileCard">
        <div class="posrelative">
            <img width="150" height="150" border="0" src="https://content.screencast.com/users/RaviKumar87/folders/Jing/media/fd8c7ca4-1d71-483c-8b3a-8fa67e537c23/2019-06-19_1908.png">
        </div>
        <div class="fleft mediumtxt" style="width: 900px; margin-left: 177px; margin-top: -142px;">
            <div class="location-icon clr5 padb10" alt="Location" title="Location">
                <h4>
                    <span class="input-data profile-name"></span>
                </h4>
            </div>
            <ul>
                <li>
                    <span class="input-field">City </span>
                    <span class="input-data profile-city"></span>
                </li>
                <li>
                    <span class="input-field">Age </span>
                    <span class="input-data profile-age"></span>
                </li>
                <li>
                    <span class="input-field">Height </span>
                    <span class="input-data profile-height"></span>
                </li>
                <li>
                    <span class="input-field">Caste </span>
                    <span class="input-data profile-caste"></span>
                </li>
                <li>
                    <span class="input-field">Education </span>
                    <span class="input-data profile-education"></span>
                </li>
                <li>
                    <span class="input-field">Occupation </span>
                    <span class="input-data profile-occupation"></span>
                </li>
            </ul>
            <a class="btn btn-primary btn-sm search-btn-padding" style="color: white;" onclick="searchProfile()">View Profile</a>
        </div>
    </div>
</script>

<!-- 修改原容器为空的卡片容器 -->
<div class="userProfileDetails" id="userProfilesContainer">
    <!-- 这里会动态生成用户卡片 -->
</div>

2. 修改jQuery成功回调代码

清空容器后，循环每条用户数据，克隆模板并填充对应数据，最后插入到容器中：

success: function(result){
    // 清空容器，避免重复渲染
    $('#userProfilesContainer').empty();
    
    $(result).each(function(i, element){
        // 克隆模板内容
        var $card = $('#userProfileTemplate').html();
        // 把模板转为jQuery对象，方便操作
        var $cardElement = $($card);
        
        // 填充当前用户的数据（用类选择器相对查找）
        $cardElement.find('.profile-name').html(element.userBirthName);
        $cardElement.find('.profile-city').html(element.presetnAddressCity);
        $cardElement.find('.profile-age').html(element.userAge);
        $cardElement.find('.profile-height').html(element.userheight);
        $cardElement.find('.profile-caste').html(element.userCasteName);
        $cardElement.find('.profile-education').html(element.highestEducation);
        $cardElement.find('.profile-occupation').html(element.employedIn);
        
        // 把填充好的卡片插入到容器中
        $('#userProfilesContainer').append($cardElement);
    });
},

3. 可选：添加卡片样式

为了让多个卡片排版更美观，可以给.userProfileCard添加一些样式，比如：

.userProfileCard {
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    background-color: #fff;
}

为什么这样改？

模板化的结构让我们可以快速复用卡片布局，避免重复写HTML代码
移除了全局ID，改用类选择器+相对查找，避免了多个卡片之间的ID冲突问题
每次循环生成独立的卡片元素，不会覆盖之前的内容，实现多用户数据的展示

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