Tuesday 18 March 2014

jQuery Attribute Wildcard Selectors

You most likely already know it but I thought I'd highlight some common wildcard selector patters that can be used in jQuery .. I've added a jsFiddle here (http://jsfiddle.net/roeburg/mkTvx/) ..

Attribute Contains Prefix Selector [name|="value"]

Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-). (jQuery Api Link :  http://api.jquery.com/attribute-contains-prefix-selector/)



Attribute Contains Selector [name*="value"]

This is the most generous of the jQuery attribute selectors that match against a value. It will select an element if the selector's string appears anywhere within the element's attribute value. Compare this selector with the Attribute Contains Word selector (e.g. [attr~="word"]), which is more appropriate in many cases. (Jquery Api Link: http://api.jquery.com/attribute-contains-selector/)



Attribute Ends With Selector [name$="value"]

Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive. (jQuery Api Link: http://api.jquery.com/attribute-ends-with-selector/)



Attribute Contains Word Selector [name~="value"]

Selects elements that have the specified attribute with a value containing a given word, delimited by spaces. This selector matches the test string against each word in the attribute value, where a "word" is defined as a string delimited by whitespace. The selector matches if the test string is exactly equal to any of the words. (jQuery Api Link: http://api.jquery.com/attribute-contains-word-selector/)


There are of course others ..