jQueryeach 并根据数据属性映射到一个新对象

Question

我正在尝试根据数据属性从多个元素中提取所有 ID。

这是我的 html:

<div class="row">
  <div class="item" data-element='{"id":1, "name":"John"}'>John</div>
  <div class="item"></div>
</div>
<div class="row">
  <div class="item"data-element='{"id":2, "name":"Peter"}'>Peter</div>
  <div class="item"></div>
</div>

和 JavaScript:

var result = [];
$('[data-element]').each(function() {
    result = $(this).data('element');
}); 

$.map(result, function( val, i ) {
   console.log(val)
});

问题是我只得到最后一个元素。控制台日志显示 2 Peter。

我希望最终结果是以数组形式提取的所有 id 和名称，例如:

id = [1,2]
name = ['John', 'Peter']

Answer 1

从空数组开始，并在一个循环内将每个值推送到相应的数组中。你似乎把事情复杂化了

var arrObj={ id:[], name:[] };

$('[data-element]').each(function() {
   var data = $(this).data('element');
   arrObj.id.push(data.id);
   arrObj.name.push(data.name);
});

console.log(JSON.stringify(arrObj,null,' '))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
  <div class="item" data-element='{"id":1, "name":"John"}'>John</div>
  <div class="item"></div>
</div>
<div class="row">
  <div class="item"data-element='{"id":2, "name":"Peter"}'>Peter</div>
  <div class="item"></div>
</div>

如果您有很多属性并且想要数组中的每个属性值，您可以对这些属性运行另一个内部循环，而不是手动编写每个推送，如下所示:

$.each(data, function(key, value){
   arrObj[key].push(value);
})