Cool jQuery Predicate Selectors
Posted October 19, 2007 at 5:21 PM
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 »
- a[ @rel = 'nofollow' ]
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.
Start With: ^=
The ^= operator will filter elements whose attribute starts with the given value.
Ends With: $=
The $= operator will filter elements whose attribute ends with the given value.
Contains: *=
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 »
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <title>jQuery Attribute Predicate Demo</title>
- <script type="text/javascript" src="jquery.pack.js"></script>
- </head>
- <body>
-
- <h1>
- jQuery Attribute Predicate Demo
- </h1>
-
- <ul>
- <li id="list1">One</li>
- <li id="list2">Two</li>
- <li id="list3">Three</li>
- </ul>
-
-
- <!---
- Below are the test that we will run against
- the unordered list above.
- --->
-
-
- <h2>
- Tests / Results
- </h2>
-
- <h3>
- Full Match: "li[ @id = 'list1' ]"
- </h3>
-
- <p>
- <script type="text/javascript">
- document.write(
- $( "li[ @id = 'list1' ]" ).text()
- );
- </script>
- </p>
-
-
- <h3>
- Start With Match: "li[ @id ^= 'list' ]"
- </h3>
-
- <p>
- <script type="text/javascript">
- document.write(
- $( "li[ @id ^= 'list' ]" ).text()
- );
- </script>
- </p>
-
-
- <h3>
- Ends With Match: "li[ @id $= '3' ]"
- </h3>
-
- <p>
- <script type="text/javascript">
- document.write(
- $( "li[ @id $= '3' ]" ).text()
- );
- </script>
- </p>
-
-
- <h3>
- Contains Match: "li[ @id *= 'st' ]"
- </h3>
-
- <p>
- <script type="text/javascript">
- document.write(
- $( "li[ @id *= 'st' ]" ).text()
- );
- </script>
- </p>
-
- </body>
- </html>
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
Post Comment | Ask Ben | Permalink | Print Page
Newer Post
jQuery Reference Guide By PACKT Publishing
Older Post
XMLHttpRequest Object Has An Abort() Method
Reader Comments
>> jQuery is the "Easy" button of the user interface world.
Exactly!
Thanks for this nice explanation of the various specific selectors.
Quite interesting.
Note however that the code above will not work with jQuery v 1.3 and above.
You simply need to remove the "@".
More info at :
http://docs.jquery.com/Release:jQuery_1.3#Upgrading
@Cypher,
That is correct. This XPath-like attribute selection was used, then deprecated, and now, in the latest releases, completely removed.
so how do you do this in the new jQuery?
never mind... see the comment by Ben, i can't find the api reference though? any link for that?
@Vx,
Check out http://docs.jquery.com.
:) I've been using that and a search through there doesn't show any results for Predicates, or *=
I haven't found it in the docs, could you?
@Vx,
Check out Attribute Filters in the Selectors section:
http://docs.jquery.com/Selectors
Basically, in newer version of jQuery, you just have to remove teh @ sign.
Ahh I see it now... Thanks :)
I've been through the selectors page a dozen times, i wonder how i missed it! hehe.
$("input[id*='wait'][hidden]").val() would work now...
Thanks
@Vx,
No problem man, glad you got it working.
