CODEWITHSUNDEEP
jquery-selectors
ktMen
ktMen

Reputation: 165

jQuery check if element has a class beginning with some string

I need to loop through some elements in the page and then, for each one, if it had a class beginning with, for example, "C", do something. 

$('#dialog li').each(function(){
    if ($(this).hasClass("^C")){
         //do something
    }
}

It may sound silly, but what selector/method should I use on the if clause?

Upvotes: 13

Views: 25392

Answers (6)

RoToRa
RoToRa

Reputation: 38390

Carefull with $('#dialog li[class^="C"]')! It will only match elements, whose class attribute starts with "C" not ones with a class starting with C. For example it will not match <li class="foo Clown">.

AFAIK what you want is not possible mit jQuery alone. You would need to loop through the classes and check each separatly. Something like:

$('#dialog li').filter(function(){
  var classes = this.className.split(/\s/);
  for (var i = 0, len = classes.length; i < len; i++) 
    if (/^C/.test(classes[i])) return true;
  return false;
}).each( ... )

Alternativly you should consider changing your approach, and give all elements an additional class and filter by that. This has the addvantage that it can also be used in CSS:

<li class="Clown Clown-Funny">
<li class="Clown Clown-Sad">
<li class="Clown Clown-Rodeo">

Upvotes: 17

Andy B.
Andy B.

Reputation: 179

You can try that selector. That will work if there are two or more classes like this "Clown foo doo" and

You can try however something like this $('#dialog li[class*="C"]') in which case will select anything that include the "C" letter, for excample "exCelence foo".

If you are interested in counting how many classes start with "C" no matter of their position (no matter if they are at the beginning, at the and or somewhere in the middle) then you can try something like this: 

$('#dialog li[class^="C"]').each(function() {
  var classes = div.attr("class").split(" "); 
  var count = 0; 
  $.each(classes, function(i, v){ if(v.indexOf('C')!=-1) count++; });
  if (count == 1)   alert("It has one 'C' class");
  if (count>1) alert("It more than one 'C' class");
}

Upvotes: 1

Michael Petito
Michael Petito

Reputation: 13161

I don't think that there is a built-in selector to test for classes starting with a string.

There is a selector to test if an attribute starts with a string, so if you know that your elements only have one class (or always start with the class in question), you could do:

$(this).is("class^='C'")

If, however, you can't guarantee either of the above conditions, you would have to manually split out and test each class defined on the element, as described here.

Upvotes: 1

Tomalak
Tomalak

Reputation: 338138

For more elaborate filters than "starts with" you can use the filter() function:

$('#dialog li').filter( function() { 
  // return true for every element that matches your condition
  return this.className.match(/^c/) != null;
}).each(function(){
  //do something
}

Upvotes: 0

Soufiane Hassou
Soufiane Hassou

Reputation: 17750

Try something like $('#dialog li[class^="C"]')

Upvotes: 0

justkt
justkt

Reputation: 14766

Try the Attribute Starts With Selector. As a bonus, there is no need for the extra if.

$('#dialog li[class^="C"]').each(function() {
    // do something
});

Upvotes: 5

Related Questions