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
robinbehroozi
15,912 PointsNot sure what this code means?
Hi.
I'm making a mobile drop down menu like the one in the jquery example. The menu works, but there is some code I don't understand.
Here is my app.js file
var $select = $("<select></select>");
$(".menu").append($select);
$(".menu a").each(function(){
var $link = $(this);
var $linkPath = $link.attr("href");
var $option = $("<option></option>");
if($link.parent().hasClass("selected")){
$option.prop("selected", true);
};
var $textStuff = $link.text();
$option.text($textStuff);
$select.append($option);
$option.val($linkPath);
});
$select.change(function(){
window.location = $select.val();
});
The code that I don't get is where it says...
if($link.parent().hasClass("selected")){
$option.prop("selected", true);
};
I understand the top part...if the link's parent, which is the list item, has a class that is selected, do the following...
I just don't understand what ... $option.prop("selected", true); means
Any help would be much appreciated. Thanks.
6 Answers
Nichole Frazier
9,653 PointsBasically, the code checks if the link's parent has "selected", then if it does, it sets the option within that link's property to also be selected.
Nichole Frazier
9,653 Points$(".menu a").each(function(){
//Looping over each link in the class "menu"
var $link = $(this);
//Setting a variable for the current link
var $linkPath = $link.attr("href");
//Pulling the href value from the link to later add to the corresponding option
var $option = $("<option></option>");
//Creating an option for the link
if($link.parent().hasClass("selected")){
//If the link had the class "Selected" (this would be if you had some css styling for when your menu option is selected. May or may not apply to you.
$option.prop("selected", true);
//Also apply selected to it's matching option, which will make it show up as "selected" when the user looks at the mobile version of the menu
};
var $textStuff = $link.text();
//Grab link's text
$option.text($textStuff);
//Set it to it's matching option
$select.append($option);
//Put the option into your select
$option.val($linkPath);
//Set the options link to the a's link
});
I hope that helps!
Adama Sy
7,076 Pointsprop Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.prop.
you can read about it here
robinbehroozi
15,912 Points"...it sets the option within that link's property to also be selected."
I'm not sure I understand
Adama Sy
7,076 Pointsin the video , he wanted to change the website so when you select a link ( anchor you can see the link at the bottom).
prop was used to get the value of the selected string or boolean that was selected. so if the item ( link ) is selected , any in the unordered list, so it become true, and the link will show at the bottom. watch the video again you will understand what i mean
is that good enough ?
Adama Sy
7,076 PointsAdama Sy
7,076 PointsHe knows that. He was asking about .prop