如何从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都相同。

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>