html页面实现list循环问题

<#if salaryMonths.keyBeanList?exists>
                                        <#list salaryMonths.keyBeanList as keyBean> 
                                            <#if !keyBean_has_next>
                                                <div class="weui-form-preview__hd">
                                                    <div class="weui-form-preview__item">
                                                        <label class="weui-form-preview__label" id="salaryKey">${(keyBean.key)!}</label>                            
                                                                <em class="weui-form-preview__value" id="salaryValue"> ${(keyBean.value)!}元</em>
                                                            </#if>
                                                    </div>
                                             </div>
                                            <#else>
                                                <div class="weui-form-preview__hd">
                                                    <div class="weui-form-preview__item">
                                                        <label class="weui-form-preview__label" id="key">${(keyBean.key)!}</label>
                                                        <em class="weui-form-preview__value" id="value"> ${(keyBean.value)!}元</em>
                                                    </div>
                                             </div>
                                            </#if>
                                        </#list>
                                    <#else>
                                        没有记录    
                                    </#if>            
                        </#list>
                        </#if>

                    $('.weui-navbar__item').on('click', function () {
        $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
        var sMonth = $(this).attr("data-month");
        for(var i=0;i<data.length;i++){
            if(sMonth === data[i].salaryMonth){
                if(data[i].keyBeanList.length > 0){
                    for(int j = 0;j < data[i].keyBeanList.length;j++){
                        $("#key").text(data[i].keyBeanList[j].salaryKey);
                        $("#value").text(data[i].keyBeanList[j].salryValue);
                    }
                }

                    }


    最前面还有月份的按钮没有添加，后台返回的数据是一个List里面放的是一个对象，分别有key，和value值，各位大神如何可以实现，当点击按钮时，可以将对应的值写进去显示出来，现在我是根据id写的，前面的都覆盖了，只显示最后一条记录,想要循环显示出list中所有的key和value值

每次循环进来都新添加一个lable和em这样才可以全部显示出来！你这样只会把前面的值覆盖掉！最好是在循环里面进行拼接成html语句，最后在你要展示的部分$("#xx").html(ooo)这样就可以了

你这样每次循环就添加会导致后面的添加覆盖掉前面的已添加的内容！

我这边举一个例子，希望楼主能看懂我想表达的意思

    //上面的列表div给一个ID 
     <div class="weui-form-preview__item" id='listdiv'>
                <label class="weui-form-preview__label" id="key">${(keyBean.key)!}</label>
                <em class="weui-form-preview__value" id="value"> ${(keyBean.value)!}元</em>
        </div>


        //拼接要显示的内容
        var html = '';
    for(var i=0;i<data.length;i++){
         if(sMonth === data[i].salaryMonth){
                if(data[i].keyBeanList.length > 0){
                    for(int j = 0;j < data[i].keyBeanList.length;j++){
                                                html += '<label class="weui-form-preview__label" id="key">'+data[i].keyBeanList[j].salaryKey+'</label>';
                                                html += '<em class="weui-form-preview__value" id="value"> '+data[i].keyBeanList[j].salryValue+'元</em>';
                    }
                }
         }

                $('#listdiv').append(html);

大致是这么个意思，我盲写的 不知道有没有语法上的错误，逻辑基本是这样
用一个 var html = ''; 通过不断地 += 来把你要显示的内容写好
然后在把这个 html 放到你那个列表中就可以了