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

Я рассматриваю один оператор выбора, который будет нацелен на одно из многих имен класса 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- не обязательно будет первым именем класса.

Ответы

Ответ 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-');

Ответ 2

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

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

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

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

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

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

Ответ 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-')