jQuery选择器以前缀开头的任何类名（多个存在）为目标？答案

【问题标题】：jQuery selector to target any class name (of multiple present) starting with a prefix?jQuery选择器以前缀开头的任何类名（多个存在）为目标？
【发布时间】：2011-05-30 07:01:49
【问题描述】：

我正在考虑一种选择语句，它将基于字符串前缀在单个类属性值中定位多个 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- 前缀不一定是该组的第一个类名。

【问题讨论】：

标签： javascript jquery html jquery-selectors

【解决方案1】：

尝试通配符选择器

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

【讨论】：

您建议用哪种形式回答我的问题？

【解决方案2】：

由于class 属性的设计方式，您需要使用至少两个其他属性选择器（注意[class*=" detail-"] 中的空格）：

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

这会选择具有class 属性的<a> 元素

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

【讨论】：

太棒了，没想到你可以做这样的事情！
+1 喜欢这个插件 - 感谢您提供的额外信息。只是为了实现jsfiddle.net/frzay是的！

【解决方案3】：

您可以添加自己的选择器，在您的情况下，您可以为属性添加正则表达式选择器：

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

然后你可以这样做：

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

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

我在 SO 的某个地方看到了那篇文章，但我不记得在哪里。

【讨论】：

【解决方案4】：

您还可以编写一个使用.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-')

【讨论】：