Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at Scotch On The Rocks (SOTR) 2011 (Edinburgh) with:

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 Great article by @BenNadel - Cool jQuery Predicate Selectors Thanks my man — you rock the party that rocks the body!

Looking For A New Job?

100% of job board revenue is donated to Kiva. Loans that change livesFind out more »

Reader Comments

@Cypher,

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

Reply to this Comment

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

Reply to this Comment

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

Reply to this Comment

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

Reply to this Comment

one thing to be careful of is jQ does not like spaces in this selector method (found the hard way :D ).

Reply to this Comment

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?

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.