How to add class name to an array list of an object property using jQuery?

Question

I am trying to get the class name of each td and then adding another class to each td. For example: The current class is class = "X-marker" and I want to add another class bgreen and it should be class = "X-marker bgreen".

I used each method to get the class name of each td and then used attr with each to set but it doesn't work. I don't get any error but it isn't working as expected.

The object is called winInfo and the array variable is: winInfo.play = winArray[i];

var winInfo = checkWin();
if (winInfo.win) {
    currentClass = $(winInfo.play).each(function () {
        $(this).attr('class');
    });

    $(winInfo.play).each(function () {
        $(this).attr('class', currentClass + ' bgreen');
    });
}

Hatchet · Accepted Answer · 2016-04-13 02:17:54Z

2

It sounds like you're looking for addClass().

Might look something like this:

$(winInfo.play).addClass('bgreen');

answered Apr 13, 2016 at 2:17

Hatchet

5,4161 gold badge35 silver badges43 bronze badges

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

6 Comments

Maihan Nijat Over a year ago

It means, I don't need to use each method for array list?

Hatchet Over a year ago

@MaihanNijat You shouldn't, if I'm understanding you correctly. Docs say: Adds the specified class(es) to each element in the set of matched elements.

user3333134 Over a year ago

What your setting currentClass here doesn't really make sense to me. From your post it sounds like you are trying to loop over a list of TD elements and add a class to them. I'm not sure why you wouldn't just do $('X-marker').each(function() { $(this).addClass('bgreen'); }); or maybe you could try to explain the issue in more detail or provide a jsfiddle.

Quentin Roy Over a year ago

@user3333134 What you are suggestion is actually exactly the same. jquery will run the addClass function on every selected elements automatically. Same goes for most jquery's methods.

Maihan Nijat Over a year ago

@user3333134 The first class name is dynamic.

|

Quentin Roy · Accepted Answer · 2016-04-13 02:45:50Z

As stated by @Hatchet, the method addClass is clearly the easiest way to do it. However, and because it seems you are misunderstanding how each works, here is how you could do this using each and without addClass.

I am assuming in the following that winInfo.play is a proper dom selector (e.g. ".class-name p").

var winInfo = checkWin();
if (winInfo.win) {
    // `each` is just a helper that will call the provided function
    // for each of the object selected by jQuery (like a loop).
    // It does not return any value.
    $(winInfo.play).each(function () {
        var currentClass = $(this).attr('class');
        $(this).attr('class', currentClass + ' bgreen');
    });
}

Oh, and because you might not need jQuery, here is how you would do it in plain js.

var winInfo = checkWin();
if (winInfo.win) {
  // if winInfo.play is not a selector but a list of dom elements,
  // just remove document.querySelectorAll.
  for(var el of document.querySelectorAll(winInfo.play)){
    el.classList.add('bggreen');
  }
}

Collectives™ on Stack Overflow

How to add class name to an array list of an object property using jQuery?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related