Dev Tips | Become a Better Developer, One Tip at a Time.

jQuery Tip: Using XPath Selectors.

Hi everyone and welcome to the very first of many articles to come here at Dev-Tips. Today we are going to take a quick look at XPath selectors in jQuery and some common ways to use them to our advantage. The only thing required to test out this tip is the latest jQuery library.

What is an XPath Selector?

XPath selectors are known as the XML Path Language, which is used for finding and manipulating elements in xml documents. Its similar to how you would select some elements in CSS.

Basic Example

A very basic XPath selector may look something like below:

$(document).ready(function(){
     $('a[@title^="Hello"]').addClass('myClass');
});

Lets go over the code above. First we prefix any attribute selectors, such as the title tag, with the @ symbol. Next we check for any link with the title tag that starts with "Hello". Notice the '^' which tells jQuery to search from the beginning of the title tag. If you are familiar with regular expressions that will be familiar. Lastly, we add a class we have somewhere in our stylesheet to alter the original link.

Different Selections

Lets look at some more examples of how we can use XPath selectors to find elements and strings within elements.

Find any link that is a mailing link:

$('a[@href^="mailto:"]').addClass('yourClass');

Find any link that points to an image.

$('a[@href$=".jpg"]').addClass(hammerTime);

In the example above, note the dollar sign after the 'href'. This tells jQuery to search the end of the string.

Find a link pointing to a certain site, or pages on that site.

$('a[@href*="yoursite.com"]').addClass(yourClass);

This time note the asterik, this tells jQuery to search the entire href string for 'yoursite.com'.

Wrap up

This by no means is restricted to the anchor tags, you can use this on any element you wish to. Take some time and get creative with your selections.

That'll do it for today, be sure to check back tomorrow for a new tip!

Important Update!

As of jQuery 1.3, the attribute selector '@' has been deprectaed and will break in the latest version of jQuery. This is an easy fix, simply remove the @ selector, like so:

Change this:

$('a[@href*="yoursite.com"]').addClass(yourClass);

To this:

$('a[href*="yoursite.com"]').addClass(yourClass);

For more info about what changed with jQuery 1.3, check out this excellent article titled 3 quick steps for a painless upgrade to jQuery 1.3.

If you enjoyed this article, you might consider subscribing to our rss feed to stay updated with all the latest tips and articles!