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-前缀不一定是一堆类名中的第一个类名。

- John K

Answer 1

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

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

这个选择器选取了具有 class 属性的 <a> 元素，该属性：

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

- BoltClock

---

太棒了，我从来不知道你可以做这样的事情！ - Andrew Whitaker

+1 喜欢这个插件 - 感谢提供额外的信息。为了好玩，这是一个实现示例 http://jsfiddle.net/frzay/ 是的！ - John K

Answer 2

您可以添加自己的选择器，例如您可以为属性添加正则表达式选择器：

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

然后您可以像这样操作：

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

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

我在 Stack Overflow 上看到过这篇文章，但我不记得在哪里了。

- mu is too short

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

- Ken Redler

Answer 4

尝试通配符选择器

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

- ddsh79

---

你建议用哪种形式来回答我的问题？ - John K