jQuery如何选择所有以"text-"开头的类元素？

Question

我有一些类

.text-1
.text-2
.text-3

我想要选择它们所有，怎么做呢？ 感谢帮助。

- user469652

Answer 1

试试这个。要了解更多详细信息，请参考jquery选择器。

$('*[class^="text"]')

- Chinmayee G

---

class 属性接受一个空格分隔的类列表；在 class="foo text-1 bar" 上会失败。 - Quentin

我们可以使用 $('[class="text"]')，它会在类属性中搜索文本作为子字符串。参考: http://api.jquery.com/attribute-contains-selector/ - Chinmayee G

@Chinmayee 这会错误地匹配像sometext这样的内容。 - Phil

我猜他必须同时使用两种组合。$('[class^="post"],[class~="post"]') - Chinmayee G

@Chinmayee 抱歉，这只是一个虚构的例子。我是在说如果有一个正则表达式属性选择器就好了。~= 选择器是“包含单词属性选择器”（http://api.jquery.com/attribute-contains-word-selector/），但它在这里也不起作用。 - Phil

Answer 2

这里是一种既准确又不太慢的解决方案:

var elts = $('*[class*="text-"]')
  .filter(function () {
    return this.className.match(/(?:^|\s)text-/);
  });

通过使用（希望）快速的Sizzle代码来查找其属性中有“text-”的元素，然后对每个元素调用一个函数进行过滤，以便将它们缩小到实际上具有以“text-”开头的类名的元素。

- hobbs

---

+1 正确答案。而且，这个解决方案比我之前用 jQuery 获取类名的方法更快。干得好。 - Gert Grenander

Answer 3

您可以在一个函数调用中只使用两个选择器来实现此操作：

$('[class^="text-"], [class*=" text-"]')

这将检查类属性是否以text-开头或者类字符串的任何部分后面跟着text-前有空格。这样就解决了您可能遇到的任何问题。

$('[class^="text-"], [class*=" text-"]')
    .css('background-color', '#00FF00'); // add background color for demo

/* just for demo */
div:after {
  content: "class: " attr(class);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="text-1 test"></div>
<div class="text some-text-1"></div>
<div class="nope text-long-class-name"></div>
<div class="some-text-1"></div>
<div class="even get text-n-here"></div>

你可以将这部分内容提取出来，写成一个函数，用于选择所有类名以给定前缀开头的元素：

function selectElementsWithClassPrefix(prefix) {
    return $('[class^="' + prefix + '"], [class*=" ' + prefix + '"]');
}

- Daniel Thompson

Answer 4

您不一定需要指定星号*，也可以这样做：

$('[class^="text-"]')

请注意，在您要查找的text之后添加了-。

查看jQuery以选择器开头以获取更多信息。

- Sarfraz

Answer 5

这是一个处理多个类的问题的函数，例如 <div class="foo bar barfood"> 的情况：

function classStartsWith(str) {
  return $('div').map( function(i,e) {
    var classes = e.className.split(' ');
    for (var i=0, j=classes.length; i < j; i++) {
      if (classes[i].substr(0, str.length) == str) return e;
    }
  }).get();
}

该函数返回一个匹配的DOM元素数组。您可以这样使用它：

$( classStartsWith('text-') ).doSomething();

这是一个例子：http://www.jsfiddle.net/Ms6ey/3/ 当然，这假设选择器为'div'。问题似乎在询问任何元素。很容易让函数接受选择器作为另一个参数，并在示例中使用该选择器代替硬编码的选择器。

- Ken Redler

Answer 6

$('#qvDetails,#qvAdd,.qvFramedActive,#qvMoreSizes').live('mouseover',function(){

        $(this).addClass('qvHover');                                                                            

    });

这是我项目中的一个例子。你可以像上面那样同时提及div和class。

你可以用逗号分隔的方式同时提供class或div...

- kobe

---

如果您想在没有模式的情况下一起给出多个类或ID，则可以参考上面的示例。 - kobe

以上代码有什么问题，他没有提到他想要一个模式。 - kobe