Javascript 为什么forEach在js中不断递增？但在控制台中看起来很完美。

我想开发一个简单的联系人列表应用程序。使用静态json、ajax请求并使用js和引导。我想让每一行的左边都有一张个人资料图片，旁边有一个名字。每个名称和图片都来自json。与此相反，会发生以下情况：第1行ok，但第2行包含双行、第3行三行和第4行4倍的名称和图片

有什么问题吗？奖金：我如何按字母顺序排列名字。sort（）不适合我

JS代码：

var profiles = document.getElementById('profiles');
var request = new XMLHttpRequest();
request.open('GET', 'data.json');
request.onload = function() {
  var contacts = JSON.parse(request.responseText);
  contacts.forEach(function(data){
    $('.pre-scrollable').prepend('<div class="row media"></div>');
    $('.media').prepend('<div class="media-body"></div>');
    $('.media').prepend('<div class="media-left"></div>');
    $('.media-left').prepend('<img class="media-object" style="width:60px">');
    $('.media-object').attr('src', data.picture);
    $('.media-body').prepend('<p>' + data.name + '</p>');
    console.log(data.name);
  });
};
request.send();

---

你的问题很简单：

当你这样做的时候

$('.media')

您询问“选择所有具有媒体css类的应答器” 因此，选择器将选择所有媒体（即使是您在js脚本中添加的上一个媒体，因此对于第一个循环，它是可以的，但不是另一个）

要恢复您在forEach中的工作，请执行以下操作：

//第一次 -选择预滚动应答器->确定

• 添加一个.media（这样文档中就有一个.media）

• 选择媒体（选择1个应答器）

//第二次 -选择预滚动应答器->确定

• 添加一个.media（因此文档中有两个.media）

• 选择。介质（选择2个应答器）

---

…

您应该定义一个函数来创建html dom模板并插入变量名。使用，您可以轻松地做到这一点

这确保了在您自己构建整个子树dom节点时，不需要使用jquery遍历和选择dom中的元素

function templateBuilder(data) {
    return template = `
        <div class='row media'>
            <div class='media-body'>
                <p>{data.name}</p>
            </div>
            <div class='media-left'>
                <img class='media-object' style='width:60px;' src='{data.picture}'>
            </div>
        </div>
    `;
}

request.onload = function() {
    ...
    contacts.forEach(function(data) {
        $.pre-scrollable.append(templateBuilder(data));
    });
};

函数模板生成器（数据）{
返回模板=`
{data.name}

`;
}
request.onload=函数（）{
...
contacts.forEach（功能（数据）{
$.pre-scrollable.append（templateBuilder（数据））；
});
};

我已经搜索了一天的解决方案，非常“简单”，谢谢你指出。现在一切正常。因此，解决方案是使用id而不是类。顺便问一下，你知道如何按字母顺序排列这些名字吗？我应该把.sort（）放在哪里？你可以简单地把下面的代码放在foreach

contacts.sort（函数（a，b）{returna.name>b.name；}

function templateBuilder(data) {
    return template = `
        <div class='row media'>
            <div class='media-body'>
                <p>{data.name}</p>
            </div>
            <div class='media-left'>
                <img class='media-object' style='width:60px;' src='{data.picture}'>
            </div>
        </div>
    `;
}

request.onload = function() {
    ...
    contacts.forEach(function(data) {
        $.pre-scrollable.append(templateBuilder(data));
    });
};