1

我有很多元素：

<span class="test"></span>
<span class="aaa"></span>
<span class="test-one"></span>
<span class="test-two"></span>
<span class="aaa-one"></span>
<span class="test-two"></span>

我怎样才能选择一个名称为 test* 的所有跨度？我可以：

$('.test, .test-one, .test-two')

但也许有可能用正则表达式得到这个？

$('.test*')

?

在 CSS 中：

 .test, .test-one, .test-two

 .test*
4

5 回答 5

13

您正在滥用课程，并且正在寻找多个课程：

<span class="test"></span>
<span class="aaa"></span>
<span class="test one"></span>
<span class="test two"></span>
<span class="aaa one"></span>
<span class="test two"></span>

现在，$('.one')将正确返回第 3 个和第 5 个元素，$('.test')并将返回除第 2 个和第 5 个之外的所有元素。

请注意，您还可以使用$('.two.test')来获取第 4 个和第 6 个元素。

于 2013-07-30T10:32:28.637 回答
4

使用 starts-with 选择器：

$('span[class^="test"]').

http://api.jquery.com/attribute-starts-with-selector/

于 2013-07-30T10:32:35.433 回答
1

It's not clear from the small example whether there's a pattern to the -one and -two class names.

If there is a pattern, and your idea is to have alternating classes (eg odd and even rows?), then you might want to consider using the nth-child() selector. This will allow you to select the relevant elements without needing to reference any class names at all.

In this case, you could do something like this:

<div class='container'>
  <span class="test"></span>
  <span class="test"></span>
  <span class="aaa"></span>
  <span class="test"></span>
</div>

and then the jquery:

$('container span:nth-child(odd)')

and

$('container span:nth-child(even)')

See the jQuery manual for nth-child for more info.

If this isn't what you're looking for, then I would suggest following @NielsKeurentjes advice and using multiple class names in the relevant elements.

Hope that helps.

于 2013-07-30T10:47:14.043 回答
0

我会更改类，因为 HTML-Tag 可以同时具有多个类：

<span class="test"></span>
<span class="aaa"></span>
<span class="test testone"></span>
<span class="test testtwo"></span>
<span class="aaa-one"></span>
<span class="test testtwo"></span>

如果您无法更改 HTML，则可以使用 javascript (jquery) 进行更改：

$('[class]').each(function(){
   var className = $(this).attr("class");
   if("test" == className.substring(0, 4)) //starts with "test"
   {   doSomething();
   }
});

（此代码仅适用于标签不超过一个类的情况）

但这是脏代码，因为它会扫描每个具有类的 dom 元素。如果您只想应用 css-Style，如果您无法更改 HTML，更好的解决方案是将所有可能的类添加到 css-File：

.test, .test-one, .test-two{
   ...
}

...或使用其他答案中提到的 css3-selectors，但较旧的浏览器不支持它。

于 2013-07-30T10:39:34.697 回答
0

你可以使用

$("span[class*='test']"); // element with test anywhere in class attribute

或者

$("span[class^='test']"); // element with test at the start in class attribute

请注意，这些仅在元素具有单个类时才有效。

但是，您应该更好地使用@Niels 显示的内容。

一个好的 CSS 选择器参考：来自 net.tutsplus.com 的教程

于 2013-07-30T10:41:07.007 回答