jQuery 选择器来定位以前缀开头的任何类名（多个存在）？

发布于 2024-10-09 04:37:01 字数 720 浏览 4 评论 0原文

我正在考虑一个选择语句，该语句将基于字符串前缀在单个类属性值中定位多个 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"]< /a> 前缀选择器适用于标量属性值，也适用于 .hasClass(className)，但我的问题需要同时应用这两个概念。

注意： detail- 前缀不一定是该组的第一个类名。

原文

I'm considering one selection statement that would target one of many css class names in a single class attribute value based on a string prefix.

For example, I want any detail- prefixed class names to get targeted from the following sample links.

<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">

It's reminiscent of how [class|="detail"] prefix selector works on a scalar attribute value, and also of .hasClass(className), but my question needs both concepts applied simultaneously.

Note: The detail- prefix won't necessarily be the first class name of the bunch.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

美煞众生 2024-10-16 04:37:01

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

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

选择具有以 detail- 开头的 class 属性的元素

，或
包含以 前缀的类>详细信息-。类名由空格分隔根据 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-');

Because of the way the class attribute is designed, you'll need to make use of at least two other attribute selectors (notice the whitespace in [class*=" detail-"]):

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

This selects <a> elements with a class attribute that

starts with detail-, or
contains a class prefixed with detail-. Class names are separated by whitespace per the HTML spec, hence the significant space character.

If you'd like to turn this into a custom selector expression, you can do this:

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

Then select it like this:

$('a:class-prefix(detail-)');

Or if you'd like to place this in a plugin:

$.fn.filterClassPrefix = function(prefix) {
    if (!prefix)
        return this;

    var sel = '[class^="' + prefix + '"], [class*=" ' + prefix + '"]';
    return this.filter(sel);
};

Then call it like this:

$('a').filterClassPrefix('detail-');

回复收藏 0 原文

挽你眉间 2024-10-16 04:37:01

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

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

然后你可以这样做：

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

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

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

You can add your own selectors, in your case you could add a regular expression selector for attributes:

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

Then you could do something like this:

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

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

I came across that article somewhere on SO but I can't remember where.

回复收藏 0 原文

完美的未来在梦里 2024-10-16 04:37:01

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

You could also write a small plugin that uses .map() to walk through the classes.

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

And then: