Cool jQuery Predicate Selectors
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:
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:
<!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.
Want to use code from this post? Check out the license.
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.
For anyone who's interested I've published V2 of a jQuery reference if you want to have a look at that it's here: http://www.skidoosh.co.uk/jquery/jquery-selectors-and-attribute-selectors-reference-and-examples-v2/ I'll be updating it for 1.3 in a few days.
one thing to be careful of is jQ does not like spaces in this selector method (found the hard way :D ).
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?