JS动态添加div时所有元素均重复展示对象最后一项如何解决

问题原因 #

1. 你使用var声明的循环变量k不具备块级作用域，全局仅存在一个k变量。$(document).ready为异步回调，会等待DOM完全加载后才执行，此时for循环早已遍历完成，k的值已经固定为列表最后一个元素的键，所有回调执行时读取到的都是最后一个元素的内容。
2. $(document).ready的作用是监听DOM加载完成事件，无需放在for循环内重复注册，放在逻辑最外层即可。

修复方案 #

方案1：使用ES6的let声明循环变量（推荐） #

let具备块级作用域，每次循环都会生成独立的变量实例，回调中可以正确获取到每次循环对应的值：

$(document).ready(function () {
    var thelist = JSON.parse(sessionStorage.getItem("suspectList"));
    // 将var替换为let
    for (let k in thelist) {
        $('#outerdiv').append('<div class="card"><h5 class="card-header">' + 'Crime: ' + thelist[k]['crime'] + '</h5><div class="card-body"><h5 class="card-title">' + 'Suspect name : ' + thelist[k]['name'] + '</h5><p class="card-text">' + 'Date of birth: ' + thelist[k]['dob'] + '</p><a href="#" class="btn btn-primary">Enter Statement</a></div></div>');
        console.log(thelist[k]['name'] + ' ' + thelist[k]['phone'] + ' ' + thelist[k]['dob']);
    }
});

方案2：使用立即执行函数（兼容低版本环境） #

如果运行环境不支持ES6语法，可以通过立即执行函数为每次循环的k创建独立作用域，锁定当前值：

$(document).ready(function () {
    var thelist = JSON.parse(sessionStorage.getItem("suspectList"));
    for (var k in thelist) {
        // 立即执行函数传入当前k值，生成独立作用域
        (function(currentK) {
            $('#outerdiv').append('<div class="card"><h5 class="card-header">' + 'Crime: ' + thelist[currentK]['crime'] + '</h5><div class="card-body"><h5 class="card-title">' + 'Suspect name : ' + thelist[currentK]['name'] + '</h5><p class="card-text">' + 'Date of birth: ' + thelist[currentK]['dob'] + '</p><a href="#" class="btn btn-primary">Enter Statement</a></div></div>');
        })(k);
        console.log(thelist[k]['name'] + ' ' + thelist[k]['phone'] + ' ' + thelist[k]['dob']);
    }
});

方案3：使用数组forEach遍历（更稳妥） #

如果thelist是标准数组，使用forEach遍历无需手动处理作用域问题，还可以避免遍历到原型链上的额外属性，代码更简洁：

$(document).ready(function () {
    var thelist = JSON.parse(sessionStorage.getItem("suspectList"));
    thelist.forEach(function(item) {
        // 还可以配合模板字符串简化拼接写法
        $('#outerdiv').append(`<div class="card">
            <h5 class="card-header">Crime: ${item.crime}</h5>
            <div class="card-body">
                <h5 class="card-title">Suspect name : ${item.name}</h5>
                <p class="card-text">Date of birth: ${item.dob}</p>
                <a href="#" class="btn btn-primary">Enter Statement</a>
            </div>
        </div>`);
    });
});

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