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>属性为<{p}}的元素

以class或
包含一个以detail-为前缀的类。类名由空格per the HTML spec分隔，因此是重要的空格字符。

如果您想将其转换为自定义选择器表达式，可以执行以下操作：

detail-

然后选择它：

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

Answer 2

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

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

然后你可以这样做：

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

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

我偶然发现那篇文章，但我不记得在哪里。

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

Answer 4

尝试使用通配符

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

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

4 个答案: