如何使用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});

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

你可以简化＆＃39;喜欢这个，如果你想要

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

＆＃13;

＆＃13;

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

document.addEventListener("DOMContentLoaded", getIds);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这里是jQuery选项：

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

＆＃13;

＆＃13;

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

document.addEventListener("DOMContentLoaded", getIds);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;