I was reading up on jQuery last night and came across some cool jQuery predicate filtering in the selector statements. We have all seen the predicate for full attribute value matches:
Launch code in new window » Download code as text file »
This would select all the links in the document object model that have a REL attribute value of "nofollow". In addition to the "=" comparison operator, jQuery provides some additional regular-expression-esque comparison operators.
The ^= operator will filter elements whose attribute starts with the given value.
The $= operator will filter elements whose attribute ends with the given value.
The *= operator will filter elements whose attribute contains the given value.
To test this, I whipped up a little demo page. On this demo page we have a number of list items, each of which have an ID that starts with "list" and ends with the one-based index of the list item. Then, we use the jQuery selectors from above to output the text of the matched elements:
Launch code in new window » Download code as text file »
Running the above page, we get the following output:
Full Match: "li[ @id = 'list1' ]"
One
Start With Match: "li[ @id ^= 'list' ]"
OneTwoThree
Ends With Match: "li[ @id $= '3' ]"
Three
Contains Match: "li[ @id *= 'st' ]"
OneTwoThree
The more I read up on jQuery, the more I realize how sweet-ass it is. jQuery is the "Easy" button of the user interface world.
| | | | ||
| | ![]() | | ||
| | | |
Download Code Snippet ZIP File
Comments (1) | Post Comment | Ask Ben | Permalink | Print Page
>> jQuery is the "Easy" button of the user interface world.
Exactly!
Thanks for this nice explanation of the various specific selectors.
Posted by Michael Evangelista on Oct 20, 2007 at 12:08 PM