Question

var selectedCountries = {};

var id = 1;
var profile = {};

$(".countriesSelection").find('span').each(function() {
  var countryName = $(this).text();
  var profile1 = {};
  profile1.id = id;
  profile1.countryName = countryName;

  $.extend(profile, profile1);
});

$.extend(selectedCountries, profile);

console.log(selectedCountries);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countriesSelection">
  <span>India</span>
  <span>USA</span>
  <span>China</span>
  <span>Japan</span>
</div>

我正在尝试遍历div中的跨度并将spans的值添加到具有一个id的对象。我正在尝试下面的内容，但它只添加了一个项目，如何将每个国家/地区和ID添加到对象？

my Fiddle

Answer 1

对于变量array

，您应该使用object代替selectedCountries

运行以下代码段

var selectedCountries = [];

var id = 1;

$(".countriesSelection").find('span').each(function() {
  var countryName = $(this).text();
  var profile1 = {};
  profile1.id = id;
  profile1.countryName = countryName;

  selectedCountries.push(profile1)
});

console.log(selectedCountries);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countriesSelection">
  <span>India</span>
  <span>USA</span>
  <span>China</span>
  <span>Japan</span>
</div>

Answer 2

您需要使用array.push（）而不是$ .extend将其存储在数组中。使用旧对象的extend替换属性。这就是为什么你只获得最后一个价值。

试试这个：

 

var id = 1;
var profile = [];

$(".countriesSelection").find('span').each(function() {
  var countryName = $(this).text();
  var profile1 = {};
  profile1.id = id;
  profile1.countryName = countryName;

  profile.push(profile1);
});



console.log(profile);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countriesSelection">
  <span>India</span>
  <span>USA</span>
  <span>China</span>
  <span>Japan</span>
</div>

Answer 3

使用$.extend，您将覆盖之前分配的任何属性。如果第一次迭代将profile变为{ id: 1, countryName: 'India' }，则第二次迭代会将这些属性覆盖为{ id: 2, countryName: 'USA' }。

您应该使用数组而不是对象，然后推送到数组 - 并完全避免使用jQuery，不需要它。

const selectedCountries = [...document.querySelectorAll('.countriesSelection > span')]
  .map((span, i) => ({ id: i + 1, countryName: span.textContent }));
console.log(selectedCountries);

<div class="countriesSelection">

<span>India</span>
<span>USA</span>
<span>China</span>
<span>Japan</span>

</div>

Answer 4

你需要使用这是array objects。只需使用此代码。

https://jsfiddle.net/xh8L2594/21/

var selectedCountries = []
var id = 1;
$(".countriesSelection").find('span').each(function() {
  var countryName = $(this).text();
  selectedCountries.push({
  id:id, // update id accordingly
  country:countryName
  }) 
});

console.log(selectedCountries);

Answer 5

您可以使用jQuery map方法返回array，以获得 ES6 组合所需的结果。

map()方法创建一个新数组，其结果是在调用数组中的每个元素上调用提供的函数。

<强>样本

const id = 1;

let profile = $.map($(".countriesSelection span"), item => {
  return {id,countryName:$(item).text()};
})

console.log(profile);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countriesSelection">
  <span>India</span>
  <span>USA</span>
  <span>China</span>
  <span>Japan</span>
</div>

Jquery向Object添加项失败

5 个答案: