JQuery селектор для целевого имени любого класса (из нескольких присутствующих), начиная с префикса?

Question

Я рассматриваю один оператор выбора, который нацелился бы на одно из многих имен классов CSS в одном значении атрибута класса на основе строкового префикса.

Например, я хочу, чтобы любые имена классов с префиксом detail- были нацелены на следующие примеры ссылок.

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

Это напоминает, как селектор префикса [class|="detail"] работает со скалярным значением атрибута, а также с .hasClass(className), но мой вопрос требует одновременного применения обеих концепций.

Примечание: Префикс detail- не обязательно будет именем первого класса группы.

Answer 1

Из-за способа создания атрибута class вам нужно будет использовать как минимум два других селектора атрибута (обратите внимание на пробел в [class*=" detail-"]):

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

Это выбирает <a> элементов с атрибутом class, которые

• начинается с detail- или
• содержит класс с префиксом detail-. Имена классов разделяются пробелами в спецификации HTML , отсюда и символ пробела.

Если вы хотите превратить это в пользовательское выражение селектора, вы можете сделать это:

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

Затем выберите его так:

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

Или, если вы хотите разместить это в плагине:

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

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

Тогда назовите это так:

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

Answer 2

Вы можете добавить свои собственные селекторы, в вашем случае вы можете добавить селектор регулярного выражения для атрибутов:

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

Тогда вы могли бы сделать что-то вроде этого:

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

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

Я встречал эту статью где-то на SO, но не могу вспомнить, где.

Answer 3

Вы также можете написать небольшой плагин, который использует .map() для прохождения классов.

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

А потом:

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

Answer 4

попробуйте селектор подстановочных знаков

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