jQuery Custom Selector Demo

This is a demo for Selecting all external links with jQuery blog post.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque tellus, pretium at rutrum sed, sodales nec odio. Proin fringilla, sapien laoreet malesuada elementum, risus diam vestibulum ante, a adipiscing est nisl in elit. Cras at lobortis massa. In hac habitasse platea dictumst. Suspendisse vehicula, ante sit amet porta mollis, velit erat cursus mauris, link with rel non mollis nisi lacus a tortor. Suspendisse est tellus, luctus vel rutrum sed, varius ut nibh. Morbi viverra fringilla mauris, nec dapibus lectus accumsan non. Morbi tempus sapien at leo interdum condimentum. Proin sollicitudin nibh at lacus condimentum feugiat. Duis mollis, dui quis aliquam gravida, nulla nibh malesuada metus, quis tristique est neque sit amet mi. Sed dui dui, placerat ullamcorper dignissim eu, egestas local vel justo. Nulla facilisi.

• local
• other
• external
• local relative path

Nunc tempus congue elementum. Curabitur scelerisque nisl sit amet dui suscipit sed scelerisque odio sodales. Nam nec nisi vel quam dapibus suscipit. Aliquam laoreet mattis aliquam. Nam semper pulvinar libero, at blandit nisl rutrum in. Nulla facilisi. Ut quis vestibulum turpis. In consectetur magna luctus est volutpat tristique. Phasellus luctus, dolor non luctus convallis, link without rel felis libero convallis nisi, quis convallis orci diam dictum nisl. Etiam vehicula, lorem et consequat viverra, risus mi ullamcorper magna, eu iaculis orci lorem sit amet purus. Nullam quis est vel magna posuere mattis. Curabitur another link with rel molestie ornare sem ac pulvinar. In a est ipsum. Sed ac pellentesque nisi. Vestibulum laoreet elementum porta.

Code run on this page:

// Creating custom :external selector
$.expr[':'].external = function(obj){
    return (obj.hostname != location.hostname);
};


$(document).ready(function(){
	// Add 'external' CSS class to all external links
	$('a:external').addClass('external');
});