javascript - 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- 为前缀的类.类名由空格分隔 per the HTML spec ，因此具有重要的空格字符。

如果你想把它变成一个自定义的选择器表达式，你可以这样做:

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