jQuery selector to target any class name (of multiple present) starting with a prefix?

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