JQuery if/else statement matching a wildcard CSS name

Question

I am trying to write an if else statement in JQuery, which can change an element's class by matching 'IN' or 'OUT'.

For example: I have several <DIV> tags that each have class='IN-something' or class='OUT-something'.

The below would work if I knew the exact CSS class, but all I'll know is that it contains 'IN' or 'OUT'.

So something like this:

  if ($(jRow).hasClass('IN-*')){
    jRow.attr( "class", "OUT-foo" );
  }else{
    jRow.attr( "class", "IN-foo");
  }

Does anyone have any helpful ideas?

Salvador

Answer 1

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

Compose

Since you only want a boolean response, search is the appropriate method here. However, your approach will work fine in this case, so long as the matched string continues to evaluate to true. – Catiline

Agreed... this answer is totally legitimate (as is mine), and we both got down votes. I voted up, Sarfraz. I suspect someone (Mr. Kendall?) is a little too competitive. – Catiline

@dorkitude: It doesn't deserve down vote, if i did not used what you would do ! – Compose

Re-read my comment. I did not down vote you. I up voted you. – Catiline

I am the reason your answer score says '0' instead of '-1'. – Catiline

Incidentally, this returns -1 or 0; (not 1 or 0, so !== 1 will always evaluate as True..) – Salvador

Answer 2

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.

Sachs

V Clever - in my app I'm replacing 'foo' on purpose in this case, but that's a helpful bit of code. – Salvador

Answer 3

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") }

Subsidy

Really? Down-votes for two legitimate answers, just to promote yours? Come on. – Catiline

I didn't down vote but the "You're doing it wrong" is never helpful – Chanson

@dorkitude - how can you tell who downvoted? just wondering... I'll up vote everyone so they stop whining over their imaginary points! – Chanson

unfortunately the assumption here is that I can separate the classes; I appreciate what you're saying, but due to various legacy reasons, I can't split them at the moment... – Salvador

Yeah, the advice is valid, but the "doing it wrong" attitude is obnoxious. – Mile

@Chanson agreed. Updated. – Subsidy

Answer 4

var class = $(jRow).attr('class');
if (class.search("IN\-.*")) {
    jRow.attr( "class", "OUT-foo" );
}
else {
    jRow.attr( "class", "IN-foo");
}

Catiline

Really? Two down votes, just for answering the guy's actual question accurately? – Catiline

ok, if you get downvotes, consider the following: 1. the difference between search and indexOf-> indexOf is more appropriate here because we don't need regex here. 2. search returns -1 on not found and -1 converted to boolean gives true, so your answer can never work. 3. in regular expressions hyphens don't need to be escaped because outside character classes they don't have a special meaning. With 3 flaws and better answers available you'd be better off deleting your answer. – Crespo