jQuery tip: Creating custom selectors


This tip is extracted from the book, jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples by Phillip Dutson and Adriaan de Jonge, published by Pearson/Addison-Wesley Professional, Nov 2012, ISBN 9780321822086. For more info, please visit the publisher site. Related video training includes: "jQuery Fundamentals LiveLessons (Video Training)"

[ Enter ITworld's drawing to win a copy of jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples ]

You can add your own selectors similar to the form pseudo selectors and contains(). Writing your own selector helps you to understand their performance issues working on large data sets. And if you know how to work around these performance issues by preselecting elements, you can still take advantage of their elegant notation. Listing 2.10 shows how to create your own selector.

Listing 2.10 Creating a Custom Selector for Every Third Element

00 <!DOCTYPE html>


02 <html lang="en">

03 <head>

04  <title>Custom selector</title>

05 </head>

06 <body>


08 <h2>Every third line gets a blue background color</h2>


10 <ul>

11   <li>One</li>

12   <li>Two</li>

13   <li>Three</li>

14   <li>Four</li>

15   <li>Five</li>

16   <li>Six</li>

17   <li>Seven</li>

18   <li>Eight</li>

19   <li>Nine</li>

20   <li>Ten</li>

21 </ul>



24 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>


26 <script>

27 // please externalize this code to an external .js file

28 $(document).ready(function() {


30   $.expr[':'].third = function(obj, index, meta, stack) {


32     // obj contains the current element


34     // index contains the 0 - n, depending on the current

35     // element and the number of elements


37     // meta contains an array with the following values:

38     // [":third('bla')", "third", "'", "bla"]


40     // stack contains a NodeList, which can be transformed into

41     // an array using $.makeArray(stack)


43     return (index + 1) % 3 == 0;

44   };


46   $('li:third(\'bla\')').css('background-color', 'blue');


48   // li:nth-child(3n) would do the same of course

49   // this example is to show how to implement a custom

50   // selector


52 });


54 </script>

55 </body>

56 </html>

At the core of jQuery is the sizzle selector engine. This is what gives jQuery the ability to transverse the DOM and select what you want. You can use the sizzle selector in jQuery to create your own selectors. Line 30 shows how this is done. By using $.expr[':'], you are informing jQuery that you are going to build a selector. Adding .third instructs jQuery how the selector will be accessed. The four variables in the anonymous function are standard in creating a custom selector. Each variable has been explained in the comments to help you understand what each one holds.

This example does not use all possibilities that are available for a custom selector. The bla argument passed to it does not have a function. Using the pointers inside the code comments, you can elaborate on the possibilities.

Don't miss...

20 historic tech sounds you may have forgotten

10 geeky street signs: Finding your way to nerdvana

25 crazy and scary things the TSA has found on travelers

  Sign me up for ITworld's FREE daily newsletter!

Join us:






Answers - Powered by ITworld

ITworld Answers helps you solve problems and share expertise. Ask a question or take a crack at answering the new questions below.

Ask a Question