使用jQuery向对象添加元素失败的问题排查

我来帮你捋捋问题出在哪——你的代码逻辑里有个关键误区：

问题根源 #

你每次循环创建profile1对象后，用$.extend(profile, profile1)把它合并到profile里，但profile是个单一对象，每次合并都会直接覆盖它的id和countryName属性（因为键名完全重复）。循环结束后，profile里只保留了最后一个<span>的国家信息，再把它合并到selectedCountries，自然只能得到一条数据。另外，你的id变量在循环里没有自增，就算没覆盖，所有国家的id都会是1，这也不符合预期。

修复方案 #

根据你的需求，我推荐两种常见的实现方式：

方案1：用数组存储多个国家（更推荐，适合列表类数据）

把所有国家对象放进数组里，结构更清晰，也完全匹配“多个国家”的列表场景：

var selectedCountries = { countries: [] };
var id = 1;

$(".countriesSelection").find('span').each(function() {
  var countryName = $(this).text();
  // 为每个国家创建独立的对象
  var countryProfile = {
    id: id,
    countryName: countryName
  };
  // 把对象推送到数组中
  selectedCountries.countries.push(countryProfile);
  id++; // 记得让id自增，保证每个国家id唯一
});

console.log(selectedCountries);

输出结果会是类似这样的结构：

{
  countries: [
    { id: 1, countryName: "India" },
    { id: 2, countryName: "..." },
    // 其他国家对象
  ]
}

方案2：用对象以id为键存储（适合需要快速通过id查找的场景）

如果你确实需要用对象存储，可将每个国家的id作为键，这样就不会出现属性覆盖的问题：

var selectedCountries = {};
var id = 1;

$(".countriesSelection").find('span').each(function() {
  var countryName = $(this).text();
  selectedCountries[id] = {
    id: id,
    countryName: countryName
  };
  id++;
});

console.log(selectedCountries);

输出结果会是：

{
  "1": { id: 1, countryName: "India" },
  "2": { id: 2, countryName: "..." },
  // 其他国家对象
}

额外提示 #

• 尽量避免在循环中重复使用同一个对象进行覆盖操作，这种写法很容易导致数据丢失。
• 如果你的<span>里有空白字符，可以用$(this).text().trim()来清理，避免获取到无效的国家名称。

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