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

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

您应该使用 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] 属性的最后一个元素的值（然后将函数映射到该结果）。

Based on what you want to get - I'm not sure you even need the map function there. Check the usage of result.id and result.name in my code.

Answer 2

从空数组开始，在一个循环中将每个值推入相应的数组。你似乎把它复杂化了

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);
})

Answer 3

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

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

jQuery each and map to a new object based on data-attribute

arrays

each

jquery