Skip to main content
Ben Nadel at InVision In Real Life (IRL) 2019 (Phoenix, AZ) with: Jonathon Wilson
Ben Nadel at InVision In Real Life (IRL) 2019 (Phoenix, AZ) with: Jonathon Wilson ( @chilkari )

Cool jQuery Predicate Selectors

By 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

Want to use code from this post? Check out the license.

Reader Comments

15,663 Comments

@Cypher,

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

4 Comments

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

4 Comments

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

4 Comments

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

1 Comments

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?

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel