Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Simple Lightbox Adding New Attribute Values with attr()

Posted by Darrell Warren
Darrell Warren
6,644 Points

Updating Attributes

How do I update the attributes to an element with a specific class name. For example how do I update all of the anchor elements with the class "external" so that the "target" attribute has the value "_blank"?

js/app.js 
var $links = ('<a class="external"></a>');
var $window = ('_blank');
$links.attr("target", $window);
index.html 
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
  <title>Links Page</title>
</head>
<body>
  <h1>Links</h1>
  <ul>
    <li><a href="http://google.com" class="external">Google</a></li>
    <li><a href="http://yahoo.com" class="external">Yahoo</a></li>
  </ul>
  <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

HI there! There are a couple of solutions to this problem given that the only things in the HTML with the class "external" are anchor tags. However, if you had elements besides anchor tags that had that same class you'd probably need to be really specific here. Here's how I targeted all anchor elements with the class external. Please note also that the challenge does not ask you to create any new variables.

$("a.external").attr("target", "_blank");

The first part of this code a.external targets all anchor elements with the class external and creates a jQuery object. Then we use the attr method on that object to assign "target" the value of "_blank". The end result is that any link with the class "external" will be opened in a new tab when clicked instead of opening the new page in the same tab. Hope this helps! :sparkles:

Darrell Warren
Darrell Warren
6,644 Points

Jennifer, you're the best; I could kiss you. I spent a couple of hours trying to figure this out; re-watching videos and such before I threw in the towel and asked for help... So obvious, but I guess not obvious to me at the time... lol. Anyway, back to coding...