jQuery - Get a element class based on a prefix

Question

What's the fastest way possible to get a string like "fade" from the classes in the element below?

<div class="MyElement fx-fade"> ... </div>

Answer 1

Check out JQuery selector regular expressions. It might be exactly what you need! :)

Answer 2

var classes = $('.MyElement').attr('class').split(' ');
for (var i = 0; i < classes.length; i++) {
  var matches = /^fx\-(.+)/.exec(classes[i];
  if (matches != null) {
    // matches[1]
  }
}

Answer 3

If you wanted to look for something that ended in 'fade' you would use:

$("*[class$='fade']")

And for elements with a class that started with 'fade' you would use:

$("*[class^='fade']")

And to get elements that contain 'fade' you would use (this would be quicker than going through the class names string)

$("*[class*='fade']")

The "*" gets all elements so you could replace this with the element you wanted.

If you want elements that has a classname that starts with 'fx-' you would do:

var classname = "";
var elArray  = $("*[class*='fx-']");

for (var a= 0; a < elArray .length; a++)
{
   //fade
   classname = elArray[a].split("-")[1]; 
}

The array used in the for loop would have all the elements with the classnames like 'fx-'.

Rather than than the for loop checking the elements for the correct class name.

More information at jquery.com

Answer 4

Try this:

$("div[class*='fade']") 

More info

Answer 5

I'd probably go with something like:

//Split class list into individual classes:
var classes = $(".MyElement").attr("class").split(" ");
var fxType;

//Loop through them:
for (var i = 0, max = classes.elngth; i < max; i++) {
  var class = classes[i].split("-");
  //Check if the current one is prefixed with 'fx':
  if (class[0] == "fx") {
    //It is an FX - do whatever you want with it, the type of FX is stored in class[1], ie:
    fxType = class[1];
  }
}