On line 15 of app.js, I am trying to see if the parent of the link has the class of '.selected' but it isn't working. He

Question

I dont understand what I am doing wrong here. Can anyone help me clear this up?

js/app.js

//Problem: It look gross in smaller browser widths and small devices
//Solution: To hide the text links and swap them out with a more appropriate navigation

//Create a select and append to #menu
var $select = $("<select></select>");
$("#menu").append($select);

//Cycle over menu links
$("#menu a").each(function(){
  var $anchor = $(this);
  //Create an option
  var $option = $("<option></option>");
  //Deal with selected options depending on current page
  if($anchor.parent().hasClass("selected")) {
    $option.("selected", true);
  }
  //option's value is the href
  $option.val($anchor.attr("href"));
  //option's text is the text of link
  $option.text($anchor.text());
  //append option to select
  $select.append($option);
});
//Create button 
var $button = $("<button>Go</button>");
$("#menu").append($button);
//Bind click to button
$button.click(function(){
  //Go to select's location
  window.location = $select.val();
});

index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <div id="menu">
        <ul>
            <li class="selected"><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="support.html">Support</a></li>
            <li><a href="faqs.html">FAQs</a></li>
            <li><a href="events.html">Events</a></li>
        </ul>
    </div>
    <h1>Home</h1>
    <p>This is the home page.</p>
    <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>

Answer 1 · 2016-08-23T08:37:57Z

August 23, 2016 8:37am

Very simple mistake, you missed ".prop" . You can replace your if statement with the following code. I hope this works for you.

if($anchor.parent().hasClass("selected")) { $option.prop("selected", true ); }

Answer 2 · 2015-08-03T19:45:59Z

August 3, 2015 7:45pm

The way to set a property value with jQuery is

$jQueryElement.prop('propertyName', /*property value*/);

Welcome to the Treehouse Community

Looking to learn something new?

Robert Booth

Robert Booth

On line 15 of app.js, I am trying to see if the parent of the link has the class of '.selected' but it isn't working. He

2 Answers

Ashenafi Ashebo

Ashenafi Ashebo

Christian Weatherford

Christian Weatherford