Question

我有一个jsp，它将在不同的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中，如下所示：

https://content.screencast.com/users/RaviKumar87/folders/Jing/media/79b241c6-776d-4d1a-9e61-e74a880b9aff/2019-06-19_1912.png

Answer 1

您可以为每个结果附加一个新元素：

success: function(result){
    let elem;
    let cntid = 0;
     $(result).each(function(i,element){
            elem = $('<div><span id="searchProfileName"' + cntid + '>' + element.userBirthName + '</span><span id="cityName"' + cntid + '>' + element.presetnAddressCity + '</span><span id="age"' + cntid + '>' + element.userAge + '</span><span id="heigth"' + cntid + '>' + element.userheight +'</span><span id="caste"' + cntid + '>' + element.userCasteName + '</span><span id="eudcation"' + cntid + '>' + element.highestEducation + '</span><span id="occupation"' + cntid +'>' + element.employedIn + '</span></div>');                                    $('#ignorecrossbefore_1').append(elem);
            cntid++;
        });
},

这个想法是为获取的每个结果插入一个新的DOM元素... 新行不是必需的，它们只是为了使代码更具可读性。

使用循环使用jQuery使用div动态更新DOM

1 个答案: