Get Array of Attributes for Selector Results

Question

Is it possible to quickly get a [..] array of Attributes for a Selector multi-result? Example: here I need to quickly get an array of data-id attributes for all resulting matching "starts with 'NORMAL'". But the naive statement below doesn't work of course.

$('li[data-id^="NORMAL"]').attr('data-id');

var normals = $('li[data-id^="NORMAL"]');
console.log(normals.length);
var normalIDs = $('li[data-id^="NORMAL"]').attr('data-id');
// Need an array containing strings:
// ["NORMAL-ev1", "NORMAL-ev2", "NORMAL-ev4"]
console.log(normalIDs.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li data-id="NORMAL-ev1" data-start="12:30am" data-end="1:00am"> TEST1 </li>
<li data-id="NORMAL-ev2" data-start="12:45am" data-end="1:15am"> TEST2 </li>
<li data-id="SPECIAL-ev3" data-start="3:30am" data-end="3:45am"> SPECIAL TEST3 </li>
<li data-id="NORMAL-ev4" data-start="3:30am" data-end="3:45am"> TEST4 </li>

Praveen Kumar Purushothaman · Accepted Answer · 2017-12-03 21:49:57Z

You really need to loop through, but you can use $.each():

var normals = $('li[data-id^="NORMAL"]');
var normalIDs = [];
$('li[data-id^="NORMAL"]').each(function () {
  normalIDs.push($(this).attr('data-id'));
});
// Need an array containing strings:
// ["NORMAL-ev1", "NORMAL-ev2", "NORMAL-ev4"]
console.log(normalIDs.length);
console.log(normalIDs);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li data-id="NORMAL-ev1" data-start="12:30am" data-end="1:00am"> TEST1 </li>
<li data-id="NORMAL-ev2" data-start="12:45am" data-end="1:15am"> TEST2 </li>
<li data-id="SPECIAL-ev3" data-start="3:30am" data-end="3:45am"> SPECIAL TEST3 </li>
<li data-id="NORMAL-ev4" data-start="3:30am" data-end="3:45am"> TEST4 </li>

What's happening instead is the selector takes the last found element and gives you back the contents of data-id.

charlietfl · Accepted Answer · 2017-12-03 22:10:59Z

1

Can use map() to return a new array based on element specific return value

var normalIDs = $('li[data-id^="NORMAL"]').map(function() {
  return $(this).data('id');
}).get();


console.log(normalIDs);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li data-id="NORMAL-ev1" data-start="12:30am" data-end="1:00am"> TEST1 </li>
  <li data-id="NORMAL-ev2" data-start="12:45am" data-end="1:15am"> TEST2 </li>
  <li data-id="SPECIAL-ev3" data-start="3:30am" data-end="3:45am"> SPECIAL TEST3 </li>
  <li data-id="NORMAL-ev4" data-start="3:30am" data-end="3:45am"> TEST4 </li>
</ul>

answered Dec 3, 2017 at 22:10

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

Get Array of Attributes for Selector Results

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related