Question

我们说我有以下要素：

<div data-id="1">firstElement</div>
<div data-id="2">secondElement</div>
<div data-id="3">thirdElement</div>

我知道我可以选择所有元素：

$('[data-id]')

Or .filter Or .find Or querySellectorAll

甚至可以对它们实现一个功能：

$('[data-id]').each

但我不知道如何获得价值而不是元素。

我想把它们收集在一个数组中，所以最终的结果是：

['1', '2' ,'3'] OR [1, 2, 3]

Answer 1

您可以通过迭代$('[data-id]')

来执行此操作

var values = [];
$('[data-id]').each(function(){
  values.push($(this).data('id'))
})
console.log(values)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-id="1">firstElement</div>
<div data-id="2">secondElement</div>
<div data-id="3">thirdElement</div>

Answer 2

你可以使用jQuery中的.data method来实现这个目标！

所以你可以做以下事情，特别是从你拥有的数据中得到一个数组：

var arr = [];
$('[data-id]').each(function(){
  arr.push($(this).data('id'));
});

console.log(arr);  // [1, 2, 3]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-id="1">firstElement</div>
<div data-id="2">secondElement</div>
<div data-id="3">thirdElement</div>

Answer 3

您希望从现有列表创建新列表，以便您可以使用$.map函数遍历列表并返回原始列表中只有所需项目/元素的新列表。

您可以通过以下方式实现这一目标：

$.map($('div[data-id]'), x => $(x).data('id'))

Answer 4

您应该使用JavaScript原生函数＆amp;比jQuery工作得更快：

var dataValues = [];
document.querySelectorAll('div[data-id]').forEach(function(ele){
  // You can add if condition to check the value base on your logic
  // if (condition is true) {
     dataValues.push(Number(ele.getAttribute('data-id')));
  // }
})
console.log(dataValues);

请参阅下面的实例：

var dataValues = [];
document.querySelectorAll('div[data-id]').forEach(function(ele){
  // You can add if condition to check the value base on your logic
  // if (condition is true) {
     dataValues.push(Number(ele.getAttribute('data-id')));
  // }
})
console.log(dataValues);

<div data-id="1">firstElement</div>
<div data-id="2">secondElement</div>
<div data-id="3">thirdElement</div>

如何从所有匹配元素中获取数据？

4 个答案: