如何从 HTML 中显示的元素列表创建数据对象

Question

我的html代码如下：

<div class="list-item">
  <div class="details">
    <a href="https://link_to_Item_1" />
  </div>
</div>
<div class="list-item">
  <div class="details">
    <a href="https://link_to_Item_2" />
  </div>
</div>
<div class="list-item">
  <div class="details">
    <a href="https://link_to_Item_3" />
  </div>
</div>

使用jQuery，我希望从上述HTML创建以下对象：

[
  {
    position :1,
    url: "https://link_to_Item_1"
  },
  {
    position :"2",
    url: "https://link_to_Item_1"
  },
  {
    position :"3",
    url: "https://link_to_Item_2"
  }
]

我尝试了以下类似的方法：

var myData = [];
var myDataElements = {};
$('.list-item').find('a').each(function(index, ele){
    myDataElements.position = index;
    myDataElements.url = $(this).attr('href');
myData.push(myDataElements);    
});

但结果是myData中所有元素的位置和URL都变成了相同的。

- Adhyatmik

Answer 1

问题在于你在循环外声明了对象。但是你需要在每次迭代中使用该对象，所以请在函数内部声明该对象：

var myData = [];
$('.list-item').find('a').each(function(index, ele){
  var myDataElements = {};
  myDataElements.position = index + 1;
  myDataElements.url = $(this).attr('href');
  myData.push(myDataElements);    
});
console.log(myData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-item">
  <div class="details">
    <a href="https://link_to_Item_1" />
  </div>
</div>
<div class="list-item">
  <div class="details">
    <a href="https://link_to_Item_2" />
  </div>
</div>
<div class="list-item">
  <div class="details">
    <a href="https://link_to_Item_3" />
  </div>
</div>

您还可以使用jQuery的 .map() 和 .get() 方法，例如以下方式：

var myData = $('.details').map(function(i, el){
  return {
    position: i+1,
    url: $(el).find('a').attr('href')
  }
}).get();
console.log(myData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-item">
  <div class="details">
    <a href="https://link_to_Item_1" />
  </div>
</div>
<div class="list-item">
  <div class="details">
    <a href="https://link_to_Item_2" />
  </div>
</div>
<div class="list-item">
  <div class="details">
    <a href="https://link_to_Item_3" />
  </div>
</div>

- Mamun

---

你的第二次编辑已经被其他人解释过了。你的第一次编辑试图展示如何编写惯用代码来解决问题，而不是解释原始帖子中的错误以及如何修复它。 - Arup Rakshit

Answer 2

你需要在循环内初始化变量myDataElements：

在循环开始前定义并初始化myDataElements变量：

var myDataElements = {};

"最初的回答"：请确保正确闭合锚点标签，例如：

<a href="https://link_to_Item_1"></a>

最初的回答

不要使用：

<a href="https://link_to_Item_1" />

注意：如果你想从1开始计数而不是从0开始，可以将索引增加1，因为索引是以0为基础的。

最初的回答：

var myData = [];

$('.list-item a').each(function(index, ele) {
  var myDataElements = {};

  myDataElements.position = index + 1;
  myDataElements.url = $(this).attr('href');

  myData.push(myDataElements);
});

console.log(myData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-item">
  <div class="details">
    <a href="https://link_to_Item_1"></a>
  </div>
</div>
<div class="list-item">
  <div class="details">
    <a href="https://link_to_Item_2"></a>
  </div>
</div>
<div class="list-item">
  <div class="details">
    <a href="https://link_to_Item_3"></a>
  </div>
</div>

- Zakaria Acharki

---

在我看来，这是一个很好的答案，因为它解释了问题的源头并展示了如何修复它。+1 - Arup Rakshit

Answer 3

myDataElements 在这里指向同一个对象。每次迭代时，你基本上都在更改它的两个属性 position 和 url 的值，然后将其推入数组中。所有 myData 的数组元素都是你在此处创建的同一个对象 var myDataElements = {};。这就是为什么你最终得到了相同的对象在 myData 中。

你想要的是：

myData.push(Object.assign({}, myDataElements);
// or  myData.push({...myDataElements});

现在，您正在通过复制myDataElements并将其推入数组myData来创建一个新对象。这将为您提供所需的输出结果。

- Arup Rakshit