jQuery’s Advanced Attribute Selectors
Oct 17, 2013
1 minute read

TIL that jQuery has some pretty cool attribute querying capability.

I knew you could select element by attributes by simple adding them with brackets:

$('a[rel]')

And that you can also match against content inside the attributes.

$('a[rel="nofollow"]')
$('a[rel!="nofollow"]')

But this is where is gets cool. You’re not just limited to equal or not equal. You can also provide other operators for more advanced matching scenarios:

$('a[rel|="nofollow"]') // prefix search: "nofollow-"
$('a[rel*="nofollow"]') // contains search: "xxnofollowxx"
$('a[rel~="nofollow"]') // word search: "me nofollow bookmark"
$('a[rel$="nofollow"]') // starts with search: "nofollowxxx"
$('a[rel^="nofollow"]') // ends with search: "xxnofollow"

Check out the docs for more info: http://api.jquery.com/category/selectors/attribute-selectors/