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