Create a Custom jQuery Selector




jQuery has a rich and powerful collection of selectors. jQuery being extensible, also allows you to add your own set of custom selectors with ease. Here’s an example of how to create your own custom selector that identifies all mailto: links on a page.

Note: You can find a full list of jQuery selectors on the jQuery site at http://api.jquery.com/category/selectors/

<html xmlns="http://www.w3.org/1999/xhtml" >
<
head>
<
title>Create jQuery Custom Selector from DevCurry.com</title>
<
style type="text/css">
div { height: 150px; width: 250px; border: 1px solid black; }
</style>
<
script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js">
</
script>

<
script type="text/javascript">
$(function () {
$.extend($.expr[':'], {
mailToLink: function (obj) {
return obj.href.match(/^mailto\:/);
}
});

$("#btnFindMailTo").click(function () {
$("div a:mailToLink").css("color", "red");
});
});
</script>
</
head>
<
body>
<
p>List of Links:</p>
<
div>
<
a href="http://jquery.com">jquery</a><br />
<
a href="http://www.devcurry.com/">devcurry</a><br />
<
a href="http://www.dotnetcurry.com">dotnetcurry</a><br />
<
a href="mailto:fakeaddr@devcurry.com">fakeaddr@devcurry.com</a>
</
div>

<
input id="btnFindMailTo" type="button" value="Find mailto: links" />
</
body>
</
html>

In the code shown above, we have extended jQuery’s selector expressions under the jQuery.expr[':'] object (read more about sizzle) and have defined a custom selector called :mailToLink. We pass in the object, which is a collection of links, to this selector that looks for all anchor elements containing an href attribute that matches mailto:

jquery custom selector

Once we have created this selector :mailToLink, we can use it in a similar way shown below:

jquery custom selector

When you click the button, only the last link’s color is set to red, since that’s the only one with an href containing mailto:

OUTPUT

image

See a Live Demo


Read some more jQuery Tips here


Will you give this article a +1 ? Thanks in advance




About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

5 Responses to "Create a Custom jQuery Selector"
  1. Anonymous said...
    February 16, 2011 at 5:16 PM

    Very nice and simple.
    Thanks, George.

  2. salwar said...
    February 16, 2011 at 10:24 PM

    Thanks for giving such a nice information...

  3. sudhan form callezee said...
    February 18, 2011 at 3:43 AM

    thank you this information gave me lot of ideas..

  4. Paulo Jorge Dias said...
    March 3, 2011 at 2:31 AM

    jQuery have any selector for xpath?
    Thanks for your informative articles.
    Paulo

  5. Suprotim Agarwal said...
    March 3, 2011 at 9:48 AM

    jQuery selectors earlier were made of Xpath + CSS3. But the latest jQuery library does not support Xpath.

    Infact it is not needed anymore as the current CSS 3 selectors do the job!

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions