如何从选择器变量$ $每个函数中创建具有键/值对的对象数组

Question

我试图用多个选择器的值创建一个新对象。例如：

loopSelector = $('.myClass');
loopSelector.each(function(i, elem) {
  var1 = $(elem).parents('li').text();
  var2 = $(elem).parents('p').text();
  var newArray = [{
    animal: var1
    age: var2
  }];
  console.log(newArray);
}

在控制台中我得到：

• 阵列（1）
• 0：{动物：'猫'，年龄：12}
• 阵列（1）
• 0：{动物：'狗'，年龄：5}
• 阵列（1）
• 0：{动物：'山羊'，年龄：7}

但是当我尝试使用console.log(newArray.age);时，我会得到undefined 3次。我的目标是按年龄的价值比较所有对象。

有更好的方法吗？

Answer 1

，因为您要创建选择相同元素的数组，只需使用.map()而不是.each()：

考虑使用不同的数据表示。

loopSelector = $('.myClass');
var array = loopSelector.map(function (i, elem) {
  var animal = $(elem).parents('li').text();
  var age = $(elem).parents('p').text();
  return {
    animal: animal,
    age: age
  };
}).get();
console.log(array);

请注意，末尾使用.get()（如评论中的Taplar指出），该jQuery对象转换为常规的JavaScript数组。

或带有一些花哨的ES6特征，以使事情整洁一点：

const array = $('.myClass').map((i, elem) => {
  const animal = $(elem).parents('li').text();
  const age = $(elem).parents('p').text();
  return { animal, age };
}).get();
console.log(array);

Answer 2

您可以尝试以下代码段直接访问对象：

loopSelector = $('.myClass');
var newArray = [];
loopSelector.each(function(i, elem) {
  var obj = {};
  var1 = $(elem).parents('li').text();
  var2 = $(elem).parents('p').text(); 
  obj.animal = var1;
  obj.age = var2;
  newArray.push(obj);
}
newArray.map(val => {
  //Here your will be able to access directly to objects with key name.
  console.log(val)
});