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

Question

我想开发一个简单的联系人列表应用程序。使用静态 json、ajax 请求并使用 js 和 bootstrap。我想让每一行的左侧都有个人资料图片，旁边有一个名字。每个名字和图片都来自 json.相反，会发生以下情况:第一行​​正常，但第二行包含双倍，第三行包含三倍，第四行包含四倍名称和图片。

有什么问题吗？奖励:如何按字母顺序对姓名进行排序？ .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();

数据.json:

    [
      {
        "name": "Richard",
        "address": "Cell",
        "mobile": "687 30 79",
        "picture": "1.jpg"
      },
      {
        "name": "Daniel",
        "address": "Sarvar",
        "mobile": "616 58 42",
        "picture": "2.jpg"
      },
      {
        "name": "Adam",
        "address": "Budapest",
        "mobile": "178 24 98",
        "picture": "3.jpg"
      },
      {
        "name": "Brad",
        "address": "Szeged",
        "mobile": "812 25 66",
        "picture": "4.jpg"
      }
    ]

Answer 1

你的问题很简单:

当你这样做

$('.media')

您询问“选择所有具有媒体 CSS 类的应答器” 因此选择器将选择所有媒体(甚至是您之前在 js 脚本中添加的媒体，因此对于第一个循环来说可以，但其他循环则不行)

要恢复在 forEach 中执行的操作:

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

• 添加一个 .media(因此文档中有一个 .media)

• 选择 .media(选择 1 个应答器)

• ...

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

• 添加一个.media(因此文档中有两个.media)

• 选择 .media(已选择 2 个应答器)

• ...

...