Add Class to Array of ID's in Javascript

Question

I am using .map to get an array of element IDs (this is named 'ids') that have a 'default-highlight' class. After removing that class on mouseenter, I want to return that class to those specific id's (basically, leave it how I found it).

Two things are causing me trouble right now:

When I dynamically add data-ids to the td elements and then use those data-ids to create the array of 'ids' my mouseenter stops adding the 'HIGHLIGHT' class (NO idea why this is happening)
On mouseleave I can't loop through the 'ids' and return the 'default-highlight' class to the elements they originally were on

I figure I should be using something like this, but it obviously isn't working:

$.each(ids, function() {
   $(this).addClass('default-highlight');
});

I have tried a number of things, but keep coming up short. I am attaching a link to a codepen.io where I use data-ids that are being dynamically added to the table (this one the mouseenter doesn't work) and a codepen one where I am using regular IDs for the default highlight and everything appears to work like it is supposed to be (It isn't, since I want to be using the dynamically generated data-ids and then the subsequently produced array to reapply those classes).

Both of these codepens have a gif at top showing how the interaction should work.

If anything is unclear, please let me know. Thanks for reading!

Uncaught TypeError: ids.get is not a function. Replace $('#output').text(ids.get().join(', ')); with $('#output').text(ids.join(', ')); codepen — Artur Filipiak
– Artur Filipiak, Commented Sep 21, 2015 at 18:15
Thanks @ᴀʀᴛᴜʀғɪʟɪᴘɪᴀᴋ for pointing that out - fixed it — Neal Jones
– Neal Jones, Commented Sep 21, 2015 at 18:18

Pranav C Balan · Accepted Answer · 2015-09-21 18:28:16Z

4

You need to add # before id selector

$.each(ids, function() {
   $('#'+this).addClass('default-highlight');
});

or you can use common selector by the help of map() and join()

$(ids.map(function(i, v) {
  return '#' + v;
}).join()).addClass('default-highlight');

or you can add # when getting the id's and then you just need to join them

var ids = $('.default-highlight').map(function(i) {
  return '#'+$(this).data('id');
}).get();
...
...
...
$(ids.join()).addClass('default-highlight');

edited Sep 21, 2015 at 18:28

answered Sep 21, 2015 at 18:16

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Neal Jones Over a year ago

Thanks, giving this a shot

Pranav C Balan Over a year ago

@NealJones : glad to help

Praveen Kumar Purushothaman · Accepted Answer · 2015-09-21 18:47:12Z

1

It seems like storing the IDs and using those is overkill when you can store a reference to the jQuery element directly:

$highlightCells = $('.default-highlight').removeClass('default-highlight')

And later give the class back:

$highlightCells.addClass('default-highlight')

Here's a codepen fork: http://codepen.io/anon/pen/ZbOvZR?editors=101

edited Sep 21, 2015 at 18:47

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

answered Sep 21, 2015 at 18:37

Malk

12k4 gold badges35 silver badges34 bronze badges

Comments

Praveen Kumar Purushothaman · Accepted Answer · 2015-09-21 18:28:50Z

0

Use this way:

$.each(ids, function() {
   $("#" + this).addClass('default-highlight');
});

answered Sep 21, 2015 at 18:28

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

3 Comments

charlietfl Over a year ago

this in string array isn't what you want it to be

Praveen Kumar Purushothaman Over a year ago

This will be the same as mapping all the array elements with the # and adding the class right?

charlietfl Over a year ago

not sure why...but $.each doesn't assign the array element to this when it is a string, only object

Collectives™ on Stack Overflow

Add Class to Array of ID's in Javascript

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related