Cool jQuery Predicate Selectors : Kinky Solutions : A Student's Perspective by Ben Nadel

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.

Cool jQuery Predicate Selectors : Kinky Solutions : A Student's Perspective by Ben Nadel