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

Answer 2

您应该使用map 内部您拥有的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的使用情况。

Answer 3

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

每个jQuery并根据data-attribute映射到一个新对象

3 个答案: