jQuery each 并根据数据属性映射到一个新对象答案

【问题标题】：jQuery each and map to a new object based on data-attributejQuery each 并根据数据属性映射到一个新对象
【发布时间】：2017-05-03 11:05:00
【问题描述】：

我正在尝试根据数据属性从多个元素中提取所有 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']

【问题讨论】：

这能回答你的问题吗？ JQuery get all data attributes from a list

标签： jquery arrays each

【解决方案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);
})

【讨论】：

谢谢完美。

【解决方案2】：

你应该使用map inside你拥有的each函数：

var result = [];
var id = [];
var name = [];
$('[data-element]').each(function() {
  result = $(this).data('element');
  
  id[id.length] = result.id;
  name[name.length] = result.name;
  
  $.map(result, function( val, i ) {
    console.log(val)
  });
  
});

console.log(id)
console.log(name)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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 函数遍历所有元素，当循环完成时 - result 中的值是具有 [data-element] 属性的最后一个元素的值（并且你将函数映射到那个结果）。

根据您想要获得的内容 - 我不确定您是否需要 map 函数。检查我的代码中result.id 和result.name 的使用情况。

【讨论】：

【解决方案3】：

在 forEach 循环的每次迭代中，您都将一个空数组设置为 $(this).data('element') 的值。因此，当您评估它时，最后一次迭代将始终是 result 的值。使用 Array 方法将项目添加到数组中，而不是设置它；所以应该是result.push($(this).data('element'));而不是result = $(this).data('element');

【讨论】：