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 nagamani palamuthi
nagamani palamuthi
6,160 Points

this challenge is not passing...

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

could someone chk my code?

js/app.js 
$(".external a").attr("target" , " _blank");
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>

2 Answers

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 things going on here. First, you have an extraneous space between the quotation marks and the _blank. Also, you are targeting all anchor tags inside of the class "external" instead of targeting all links that have the class "external". This is a subtle but important point.

There are two separate solutions that will pass this challenge, but I think maybe you can get it working with just these hints. Let me know if you're still stuck! :sparkles:

Amir Eskandari
Amir Eskandari
9,153 Points
Amir Eskandari
Amir Eskandari
9,153 Points

Great answer Jennifer, very helpful!

nagamani palamuthi
nagamani palamuthi
6,160 Points

ya great answer jennifer.. now it works. i fixed the space and just included the class name as selector. but I have a couple of doubts.

  1. what is the subtle difference between anchor tags and links? 2.how does selecting only the class name t, add the attribut and its values to all links, even though we are not specifying links in the selector. (unless I am guessing that all links have been given that class name for the challenge to pass.
  2. I am curious to know what was the other solution to this challenge.

Thanks again for your time and help. Hope my questions make sense.

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

Hi! Glad you got through the challenge. The subtle difference I was referring to is not the difference between anchor tags and links. Those are the same thing.

The difference I was referring to is selecting something inside something else that has a class and selecting something that has that class name. Let's take a look at an example of what I mean.

<div class="external">
        <ul>
           <li><a href="http://google.com" >Google</a></li>
          <li><a href="http://yahoo.com">Yahoo</a></li>
       </ul>
</div>

Selecting "external" will select the div and then those rules will apply to everything inside. But the challenge wanted you to select something that has the class "external". So in the above example, the div has the class "external" and the links simply reside inside that parent container. But what they wanted was for you to target the links that have the class "external".

But if we did this:

    <ul>
      <li><a href="http://google.com" class="external">Google</a></li>
      <li><a href="http://yahoo.com">Yahoo</a></li>
  </ul>

It would select only the first link as that's the only one that now has the class "external". The other solution was to do this:

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

This is a very specific rule and specifically targets only anchor tags that have the class external assigned to them. Hope that clarifies things! :sparkles:

edited for additional note

Yes, this challenge is sort of odd in that the only things with the class "external" are the links. But if we'd had say a div or paragraph with that class then this is how you'd pick just the anchor tags that have "external" while leaving the div/paragraph alone :smiley:

nagamani palamuthi
nagamani palamuthi
6,160 Points
nagamani palamuthi
nagamani palamuthi
6,160 Points

Thanks Jennifer got it! so selecting (".external a") targets all links in class external and ("a .external") targets any links with class .external? just clarifying..