jQuery的选择器目标任何类名称（的多个存在）以一个前缀开始？ [英] jQuery selector to target any class name (of multiple present) starting with a prefix?

问题描述

我正在考虑一个选择语句，它将根据字符串前缀将单个类属性值中的许多css类名称中的一个作为目标。

例如，I想从任何 detail - 前缀类名称从下面的示例链接中获得定位。

 < a href =eg.htmlclass =detail-1 pinkify another> 
 < a href =eg.htmlclass =swing narrow detail-Z> 
   

这让人想起 [class | =detail] 前缀选择器适用于标量属性值， .hasClass（className） ，但我的问题需要同时应用这两个概念。注意： detail - 前缀不一定是第一个类的名称。

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

  $（'a [class ^ =detail-]，a [class * =detail-]'）; 
  

选择< a> 元素一个 class 属性
$ b

• 以 detail- 或


• 包含一个以 detail - 为前缀的类。类名由空格根据HTML规范，因此显着的空格字符。

如果您想将它变成自定义选择器表达式，可以这样做：

  $。expr ['：'] ['class-prefix'] = function（elem，index，match）{
 var prefix = match [3]; 
 
 if（！prefix）
返回true; 
 
 var sel ='[class ^ =''+ prefix +']，[class * =''+ prefix +']'; 
返回$（elem）.is（sel）; 
}; 
  

然后像这样选择它：

  $（ '一个：类前缀（detail-）'）; 
  

或者，如果您想将它放在插件中：

  $。fn.filterClassPrefix = function（prefix）{
 if（！prefix）
 return this; 
 
 var sel ='[class ^ =''+ prefix +']，[class * =''+ prefix +']'; 
返回this.filter（sel）; 
}; 
  

然后像这样调用它：

  $（ 'A'）filterClassPrefix（ '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.

解决方案

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

这篇关于jQuery的选择器目标任何类名称（的多个存在）以一个前缀开始？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！