如何在jQuery和CSS中使用*取得类？

Question

I have many elements:

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

How can i get with one select all span with name test*? I can:

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

but maybe is possible to get this with regex?

$('.test*')

?

in css:

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

 .test*

Answer 1

You're abusing classes, and are looking for multiple classes instead:

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

Now, $('.one') will correctly return the 3rd and 5th element, and $('.test') will return all elements except the 2nd and 5th.

Note that you can also use $('.two.test') to get the 4th and 6th element.

Answer 2

Use the starts-with selector:

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

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

Answer 3

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.

Answer 4

I would change the classes, because a HTML-Tag can have multiple classes at once:

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

If you can't change the HTML, you can do it with javascript (jquery):

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

(This code only works, if the tag has not more than one class)

But this is dirty code because it scans each dom-element which has a class. If you only want to apply css-Style, the better solution, if you can't change the HTML, is to add all possible classes to the css-File:

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

...or using the css3-selectors as mentioned in the other answers, but older browsers won't support it.

Answer 5

You can use either

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

or

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

note that these will work only if the element has single class.

however you should better use what @Niels have shown.

For a good CSS selector reference : Tutorial from net.tutsplus.com