Delphinidin

One of the more attractive features of jQuery is being able to select many elements at once and change some part of the selected elements. You may run into a situation on a page where you need to quickly change all of the hyperlinks to open in a new window, but you don't have access to the source code. The code is being generated dynamically in a PHP, JSP (Java Server Pages), or ASP (Active Server Pages) file somewhere and you can't access it.

Instead, you can write a little jQuery, which saves you a lot of work editing various files and so on compared to making changes to the source code. The beauty of using jQuery is that it's extremely easy to comment out or delete the code when you no longer need it. Here I show you how to set up all the hyperlinks on a page to open in a new window. You can apply many other options to hyperlinks on your Web page, such as:

+ Assigning a new class to all hyperlinks
+ Setting the title tag on all hyperlinks to be the same as the anchor text
+ Adding a rel tag to all hyperlinks
+ Removing href from all hyperlinks so that they are disabled

In the following tutorial, I guide you through how to set up a jQuery script that loops through all of the links in a given list, adds a title tag, and sets them up to open in a new window.

1. The HTML structure in this example is an unordered list with an ID set to links. The ID is used to select the list of links.

<ul id="links">
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.bing.com">Bing</a></li>
</ul>

2. Create a selector statement to select all anchor tags that are a descendent of the #links li elements. Use the attr() method to apply the target parameter and _blank value to all the links that are a child of the #links unordered list.

$('#links li a').attr('target', '_blank');