Skip to main content
Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.

Cool jQuery Predicate Selectors

By Ben Nadel on

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.

jQuery: The Easy Button For User Interface Development
Tweet This Deep thoughts by @BenNadel - Cool jQuery Predicate Selectors Woot woot — you rock the party that rocks the body!

Reader Comments

@Cypher,

That is correct. This XPath-like attribute selection was used, then deprecated, and now, in the latest releases, completely removed.

never mind... see the comment by Ben, i can't find the api reference though? any link for that?

:) 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?

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

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?