强大的选择器来查找类的所有元素

Question

How can I get all elements who have a class that begins with vd- ? My code below works for most cases except for the following:

class="foo vd-bar"

It works for these cases:

class="vd-bar foo"

Here is my selector, will it work if the HTML markup uses single quotation marks? For eg; class='vd-foo' ?

$('[class^="vd-"]', myElement).each(function(index, ele) {


});

Answer 1

Unfortunately, CSS Level 3 attribute selectors are very limited (and Level 4 in draft are not much better).

You will have to use a combination of infix-match and prefix-match attribute selectors to achieve a robust selection of all elements with a class that begins with vd- :

[class*=" vd-"], [class^="vd-"] {
    ...
}

The first one will select elements with value of attribute class containing <space>vd- (cases like foo vd-... ) and the second one will patch the corner case of vd- class being the first one (cases like vd-bar foo ).

Performance

One might be tempted to use only infix (substring) selector, on account of assumed performance penalty incurred by usage of double attribute selectors (infix and prefix match), knowingly sacrificing the accuracy and accepting mismatches like yrivd-button for vd-button .

However, measurements show there is no statistically significant difference in performance between only infix match selector and the combined infix+prefix match selector (compare substringMatch and classPrefixSelector on jsperf.com test).

The combined selector is only 2% to 7% slower (depending on browser) than a single attribute value match selector.

If someone is concerned about that, she shouldn't use attribute selectors at all, but only class selectors .vd-name , which are 2 to 3 times faster than any of the attribute selectors (including the simplest one [attr] , which only tests for attribute existence).

Answer 2

You need to use the contains selector ( * ), not the start with selector ( ^ ). Other than that, it doesn't really matter whether you use single or double quotes as long as you match them correctly. Here is an example:

 $("[class*='vd-']").css("border", "1px solid #f00"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="foo vd-bar">first div</div> <div class='vd-bar foo'>second div</div> <div class='fvd-bar foo'>third div</div> 

Note: As you can see, the code above will select everything that contains "vd-". That should be fine for most cases because usually class prefixes don't occur in the middle of the class name. If they do, that's considered a bad design. If you want to only select elements with classes that start with "vd-", that cannot be done in a simple selector, so you'll have to use two selectors like randomir's answer below. That has a performance cost in big documents, so it is better to avoid it unless it is necessary. Here is a jQuery example:

 $("[class*=' vd-'],[class^='vd-']").css("border", "1px solid #f00"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="foo vd-bar">first div</div> <div class='vd-bar foo'>second div</div> <div class='fvd-bar foo'>third div</div>