Question

I have a stack with my work today.
My stack here:

I have a select html element and it has MULTIPLE mode:

<select class="test" MULTIPLE></select>

(MULTIPLE mode also type as : multiple=”multiple” i inclue here)

<select class="test" multiple='multiple'></select>

now i only want select this element in many normal select element:

<select class="test" ></select>
<select class="test" ></select>
<select class="test" multiple='multiple'></select>
<select class="test"> </select>

i was using jQ like this:

$(".test[!MULTIPLE]").css('border','solid 1px red');

but all select element has border red;

How can i get only select element MULTIPLE. And get select not MULTIPLE mode?

Answer 1

Try this:

$(".test:not([multiple])").css('border','solid 1px red');

Edit: As Reigel mentions, you can get the same result set with better performance if you avoid the jQuery pseudo-selector:

$(".test").not([multiple]).css('border','solid 1px red');

Edit 2: As you can tell from the comments, some quick testing shows that, at least for a few of us, the second option is actually slower. Digging further, according to css3.info, native support for the :not CSS3 selector is more widespread than I thought. That probably makes all the difference (sorry IE7), assuming jQuery uses the native selector when available.

Edit 3: Further thanks to @nickf, who ran these tests in IE8, and found no substantive difference between the two. In light of all this ambiguity, it would be wise to test in your target browser if jQuery pseudo-selectors, or :not/.not specifically, fall into a code hot spot that has a material impact on performance (and if you have a controlled target browser environment).

But if your target is all browsers, it looks like the best advice is to use what best fits your code, and avoid premature optimization.