Conditionally add class using jQuery

Question

What is the best practice way to conditionally add a class to an element? One option is a if statement, and then add the class. Another option is to add the class or add an empty string as a class. Maybe there are better options? Yea, I know speed is probably not important, but I just wish to know the "professional" way of doing this.

var addClass=1; //or 0
var row=$('#cloneElement')
  .clone(false)
  .removeClass('gone')
  .removeAttr('id')
  .attr('data-id',this.id);

if (addClass) {
  row.addClass('newClass');
}

var addClass=1; //or 0
var row=$('#cloneElement')
  .clone(false)
  .removeClass('gone')
  .removeAttr('id')
  .attr('data-id',this.id)
  .addClass(addClass?'newClass':'');

Both of these are equivalent. Make sure you always stick with a solution that would make sense for you and your fellow colleagues in 2 weeks time. — bagonyi
– bagonyi, Commented Dec 1, 2013 at 0:34
@bagonyi. I agree with sticking with one solution, thus why I asked the question so I can settle on one. — user1032531
– user1032531, Commented Dec 1, 2013 at 0:35
IMHO, sticking with the fluent interface for constructing the object makes for more legible code. That's the objective of method chaining. However the overloaded addClass method may make for a more explicit, readable alternative to the conditional operator. .addClass(function() { var newClass; if (addClass === 1) { newClass = "newClass"; } return newClass || ''; }) This all really comes down to personal preference, and team style, however. None of these is particularly obscure or obfuscated. — nbrooks
– nbrooks, Commented Dec 1, 2013 at 1:03
IMHO chaining frameworks should have .addClass(..., condition) methods ... because a lot of times we do have conditions inside the chain code. API devs take note. — Christophe Roussy
– Christophe Roussy, Commented Nov 14, 2017 at 11:15

bagonyi · Accepted Answer · 2013-12-01 00:38:05Z

4

In case you are using jquery ui you can use toggleClass

row.toggleClass('newClass', addClass)

answered Dec 1, 2013 at 0:38

bagonyi

3,3182 gold badges24 silver badges21 bronze badges

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

7 Comments

user1032531 Over a year ago

Thanks bagonyi. I do use jquery ui, but typically resist using the methods if another solution exists.

MT0 Over a year ago

If addClass is false and the element already has the newClass class then this will remove it - which is not the functionality that was being asked for.

Hussam Over a year ago

@MT0 adding a switch to toggleClass will add or remove the class based on the switch being respectively true or false api.jquery.com/toggleclass/#toggleClass-className-state

.toggleClass( className, state )   state Type: Boolean A Boolean (not just truthy/falsy) value to determine whether the class should be added or removed.

MT0 Over a year ago

@Hussam The OP's question was: if the toggle is true then add the class (if it is not there already) or if the toggle is false then do nothing - at no point are they removing the class (if it exists). The toggleClass() function will remove the class - which is not what the OP asked for.

Hussam Over a year ago

@MT0, i guessed it was OP's intention to add/remove the class from OP's last line .addClass(addClass?'newClass':''); which would add newClass or empty string, but maybe he didn't express this entirely.

|

Eamonn O'Brien-Strain · Accepted Answer · 2013-12-01 00:50:18Z

2

In my opinion the first version is better. Probably that conditional is crucial to the correct operation of your page, and it is better to make it very clear and explicit, and not make it too obscure.

One of the most important things about professional code is that it should be readable, whether by your colleagues or by you in a few months.

So I recommend, when in doubt eschew the "clever" solution and instead choose the solution that is most obvious and simple and does not require any extra comments to explain it.

answered Dec 1, 2013 at 0:50

Eamonn O'Brien-Strain

3,4121 gold badge26 silver badges33 bronze badges

Comments

ntheorist · Accepted Answer · 2018-04-03 20:55:50Z

1

here's a simple function that will conditionally add/remove a class by passing a class name and boolean

jQuery.fn.applyClass = function(className,apply){
  if( apply ){
    $(this).addClass(className);
  } else {
    $(this).removeClass(className);
  }
  return this;
};

This is better than using toggleClass in cases where you might not know the state before toggling.

an example, say you want to show a navbar when you scroll 200px down

$(window).on('scroll',function(e){
    var top = $(window).scrollTop;
    $('.navbar').applyClass('show', ( top >= 200 ));
});

answered Apr 3, 2018 at 20:55

ntheorist

1091 silver badge4 bronze badges

Comments

Maxwell s.c · Accepted Answer · 2021-10-25 15:08:21Z

1

In newer JQuery, the best option is toggleClass, without jquery ui


$element
  .toggleClass('newClass', addClass)
  .toggleClass('myClass', foo && bar)
  .toggleClass('callback', () => true)

answered Oct 25, 2021 at 15:08

Maxwell s.c

1,69816 silver badges31 bronze badges

Comments

MT0 · Accepted Answer · 2013-12-01 00:42:11Z

0

Either of the methods you have suggested will work.

This is an alternate method that allows you to chain multiple functions based on a conditional value:

var addClass=1; //or 0
var row=$('#cloneElement')
    .clone(false)
    .removeClass('gone')
    .removeAttr('id')
    .attr('data-id',this.id)
    .filter( function(){ return addClass === 1; })
    .addClass('newClass')
    .end();

edited Dec 1, 2013 at 0:42

answered Dec 1, 2013 at 0:35

MT0

173k12 gold badges70 silver badges136 bronze badges

2 Comments

user1032531 Over a year ago

Interesting. I've never used filter() or end(), but probably should start doing so

Jeremy J Starcher Over a year ago

@user1032531 - Please don't. Code that uses filter and end is much harder to mentally parse. Focus on code readability, not the fewest keystrokes to solve something.

Collectives™ on Stack Overflow

Conditionally add class using jQuery

5 Answers 5

7 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related