CODEWITHSUNDEEP
javascriptjquery
nataila
nataila

Reputation: 1619

How can I get element's data to Array with jQuery?

Here is a 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>

I want to get every tr's data-id,
I know how to get it with $.each, I know this can do it: 

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

and $('table tr').data('id') only can get the first tr's data-id But is there anyway easy and graceful to do this?
In one sentence to get data-id's array [1,2,3,4,5,6] with jQuery or js?

Upvotes: 1

Views: 354

Answers (2)

Santiago Hern&#225;ndez
Santiago Hern&#225;ndez

Reputation: 5646

This is another option, which uses pure 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>

You could 'simplifly' like this if you want

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>

Here's the jQuery option:

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>

Upvotes: 1

guest271314
guest271314

Reputation: 1

Try using $.map()

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

Upvotes: 2

Related Questions