« jQuery - Selector: Styling Sub Level Item

jQuery - Selector: XPath Selectors

jQuery Selector Step By Step Tutorial - Part 4: XML Path Language (XPath) is a type of language for identifying different elements of their values within XML documents. To see how jQuery works with XPath, look following sample.

In html document, we have 3 link like this:

<a href="love.html">Love me do</a>
<a href="obladi.pdf">Obladi Oblada</a>
<a href="mailto:music.rock">Rock 'n Roll The Music</a>

We want to give unique style every links. So, add the styles at css, such as:

a{
 color:#FF6600;
}
a.mailto{
 color:#00CC00;
}
a.pdf{
 color:#FF0000;
}
a.love{
 color:#FF00FF;
}

Then, modify your js like following:

// JavaScript Document
$(document).ready(function(){
  $('#favorite > li').addClass('category');
  $('#favorite li:not(.category)').addClass('songs');
  
  $('a[@href^="mailto:"]').addClass('mailto');
  $('a[@href$=".pdf"]').addClass('pdf');  
  $('a[@href*="love.htm"]').addClass('love');    
});

Attribute selectors accept regular-expression-like syntax for identifying the beginning(^), ending($), and asterisk(*) to indicate an arbitrary position within a string.

Now, you may get like this:

Database Tutorial

Security Tutorial

Framework Tutorial

Template Tutorial

API Tutorial

Learn Facebook

JS Framework Tutorial

AJAX Tutorial

Web Services Tutorial

Package Post