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 the New York ColdFusion User Group (Feb. 2008) 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 Interesting post by @BenNadel - Cool jQuery Predicate Selectors Thanks my man — 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?