jQuery selector to target any class name (of multi

Question

I'm considering one selection statement that would target one of many css class names in a single class attribute value based on a string prefix.

For example, I want any detail- prefixed class names to get targeted from the following sample links.

<a href="eg.html" class="detail-1 pinkify another">
<a href="eg.html" class="something detail-55 minded">
<a href="eg.html" class="swing narrow detail-Z">
<a href="eg.html" class="swing narrow detail-Z detail-88 detail-A">

It's reminiscent of how [class|="detail"] prefix selector works on a scalar attribute value, and also of .hasClass(className), but my question needs both concepts applied simultaneously.

Note: The detail- prefix won't necessarily be the first class name of the bunch.

Answer 1

try wildcard selector

http://www.emadibrahim.com/2009/07/25/jquery-wildcard-selector/

Answer 2

Because of the way the class attribute is designed, you'll need to make use of at least two other attribute selectors (notice the whitespace in [class*=" detail-"]):

$('a[class^="detail-"], a[class*=" detail-"]');

This selects <a> elements with a class attribute that

• starts with detail-, or
• contains a class prefixed with detail-. Class names are separated by whitespace per the HTML spec, hence the significant space character.

If you'd like to turn this into a custom selector expression, you can do this:

$.expr[':']['class-prefix'] = function(elem, index, match) {
    var prefix = match[3];

    if (!prefix)
        return true;

    var sel = '[class^="' + prefix + '"], [class*=" ' + prefix + '"]';
    return $(elem).is(sel);
};

Then select it like this:

$('a:class-prefix(detail-)');

Or if you'd like to place this in a plugin:

$.fn.filterClassPrefix = function(prefix) {
    if (!prefix)
        return this;

    var sel = '[class^="' + prefix + '"], [class*=" ' + prefix + '"]';
    return this.filter(sel);
};

Then call it like this:

$('a').filterClassPrefix('detail-');

Answer 3

You can add your own selectors, in your case you could add a regular expression selector for attributes:

http://james.padolsey.com/javascript/regex-selector-for-jquery/

Then you could do something like this:

$(':regex(class,(^| )detail-)')

http://jsfiddle.net/ambiguous/ArtRS/1/

I came across that article somewhere on SO but I can't remember where.

Answer 4

You could also write a small plugin that uses .map() to walk through the classes.

$.fn.classBeginsWith = function(str){
  return !str ? this : this.filter( function(){
    return $.map(this.className.split(' '), function(e,i){
      if (e.match(new RegExp('^' + str, 'ig'))) return 1;
    }).length;
  });
}

And then:

$('a').classBeginsWith('detail-')