如何使用jQuery將元素的數據傳遞給Array？

Question

這是一張table ：

<table>
  <tr data-id="1">xxx</tr>
  <tr data-id="2">xxx</tr>
  <tr data-id="3">xxx</tr>
  <tr data-id="4">xxx</tr>
  <tr data-id="5">xxx</tr>
  <tr data-id="6">xxx</tr>
</table>  

我想得到每個tr的data-id ，
我知道如何用$.each獲得它，我知道這可以做到：

var trArray = [];
$.each($('table tr'), function () {
  trArray.push($(this).data('id'));
})  

和$('table tr').data('id')只能獲得第一個tr的data-id但是這樣做是否容易和優雅呢？
用jQuery或js用一句話來獲取data-id的數組[1,2,3,4,5,6] ？

Answer 1

嘗試使用$.map()

var data = $.map($("table tr"), function(el) {return $(el).data().id})

Answer 2

這是另一個使用純js的選項。

var toarray = function(e){ return [].slice.call(e) }
var ids = toarray(document.querySelectorAll("tr")).map(function(e){return e.dataset.id});

 var getIds = function() { var toarray = function(e){ return [].slice.call(e) } var ids = toarray(document.querySelectorAll("tr")).map(function(e){ return e.dataset.id; }); alert(ids) }; document.addEventListener("DOMContentLoaded", getIds); 

 <table> <tr data-id="1">xxx</tr> <tr data-id="2">xxx</tr> <tr data-id="3">xxx</tr> <tr data-id="4">xxx</tr> <tr data-id="5">xxx</tr> <tr data-id="6">xxx</tr> </table> 

如果你願意，你可以“簡單地”這樣做

var ids = [].slice.call(document.querySelectorAll("tr")).map(function(e){return e.dataset.id});

 var getIds = function() { var ids = [].slice.call(document.querySelectorAll("tr")).map(function(e){return e.dataset.id}); alert(ids) }; document.addEventListener("DOMContentLoaded", getIds); 

 <table> <tr data-id="1">xxx</tr> <tr data-id="2">xxx</tr> <tr data-id="3">xxx</tr> <tr data-id="4">xxx</tr> <tr data-id="5">xxx</tr> <tr data-id="6">xxx</tr> </table> 

這是jQuery選項：

var ids = $.map($("tr"),function(e){return e.dataset.id});

 var getIds = function() { var ids = $.map($("tr"),function(e){return e.dataset.id}); alert(ids); }; document.addEventListener("DOMContentLoaded", getIds); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr data-id="1">xxx</tr> <tr data-id="2">xxx</tr> <tr data-id="3">xxx</tr> <tr data-id="4">xxx</tr> <tr data-id="5">xxx</tr> <tr data-id="6">xxx</tr> </table>