如何根据数组中user_id=1的对象动态创建HTML Div容器？

先来看你的原始数据和代码：

"data": [ 
  { "id": 1, "user_id": 1, "name": "James Smith" }, 
  { "id": 2, "user_id": 1, "name": "Rebecka Gordon" }, 
  { "id": 3, "user_id": 2, "name": "Carl Gonzales" }
]

$.each(data.data, function (index, value) {
  if (this.user_id == 1) {
    console.log(this);
    $('.container').html($('<div>', {class: 'box'}));
  }
});

问题出在哪？ #

你用了$('.container').html(...)，这个方法会直接替换掉容器内所有现有内容。所以第一次循环生成的box会被第二次循环的box覆盖，最后容器里只剩一个box，达不到生成2个盒子的预期。

修正后的代码 #

我们需要用.append()方法来追加新元素，而不是替换原有内容：

$.each(data.data, function (index, value) {
  if (this.user_id == 1) {
    console.log(this);
    // 用append添加新box，不会覆盖之前的内容
    $('.container').append($('<div>', {class: 'box', text: this.name}));
  }
});

我还给box加上了text: this.name，这样每个盒子里会显示对应用户的名字，你可以根据需求调整，比如添加id、user_id等更多信息。

更高效的写法（推荐） #

如果数据量较大，频繁操作DOM会影响性能，我们可以先把所有要生成的元素存起来，最后一次性添加到容器里：

let boxes = [];
$.each(data.data, function (index, value) {
  if (this.user_id == 1) {
    // 把生成的DOM元素存入数组
    boxes.push($('<div>', {class: 'box', text: this.name})[0]);
  }
});
// 一次性添加所有元素，只触发一次DOM操作
$('.container').append(boxes);

这样既能生成你需要的2个box，还能优化性能～

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