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>
01
02 <html lang="en">
03 <head>
04 <title>Custom selector</title>
05 </head>
06 <body>
07
08 <h2>Every third line gets a blue background color</h2>
09
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>
22
23
24 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
25
26 <script>
27 // please externalize this code to an external .js file
28 $(document).ready(function() {
29
30 $.expr[':'].third = function(obj, index, meta, stack) {
31
32 // obj contains the current element
33
34 // index contains the 0 - n, depending on the current
35 // element and the number of elements
36
37 // meta contains an array with the following values:
38 // [":third('bla')", "third", "'", "bla"]
39
40 // stack contains a NodeList, which can be transformed into
41 // an array using $.makeArray(stack)
42
43 return (index + 1) % 3 == 0;
44 };
45
46 $('li:third(\'bla\')').css('background-color', 'blue');
47
48 // li:nth-child(3n) would do the same of course
49 // this example is to show how to implement a custom
50 // selector
51
52 });
53
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.
