jQuery check if element has a class beginning with some string

Question

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\').e         


        

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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
}