jQuery tip: Creating custom selectors

By  

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.

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!
Email: 
 

Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Answers - Powered by ITworld

Ask a Question