JQuery if/else statement matching a wildcard CSS name JQuery if/else statement matching a wildcard CSS name jquery jquery

JQuery if/else statement matching a wildcard CSS name


if ($(jRow).attr('class').indexOf('IN-') !== 1)  {jRow.attr( "class", "OUT-foo" );}else    {jRow.attr( "class", "IN-foo");}


You can use the attribute-contains-prefix-selector(docs) if that will be the entire class value (or at least that is the first class).

if ($(jRow).is('[class |= IN]')) {

This also uses the is()(docs) method to see if jRow is a match.

Click here to test a working example. (jsFiddle)


EDIT:

If your point was that you won't know what foo is, and you need to retain it, I'd do something like this instead:

jRow.attr('class', function(i,cls) {    return cls.indexOf('IN') > -1 ? cls.replace('IN','OUT') : cls.replace('OUT','IN');});

You can pass a function as the second argument to the attr()(docs) method. That function has 2 parameters. The first is the current index in the iteration. The second is the current value of the attribute.

The return value is the value that will be set.


Use jQuery data to store "IN" or "OUT", or add an attribute of your own with a business-logic-appropriate name that says "IN" or "OUT". The real problem here is combining classnames.

You could also break out the IN and OUT and use multiple classes.

<tr class = "IN foo"/>

if( $obj.hasClass("in") ){ $obj.removeClass("in").addClass("out") }