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 Mobile Drop Down Menu Perform: Part 1

John Conlin
John Conlin
3,801 Points

Question on how jQuery obects work in this video

I have a question on how the append method works in this video. Andrew initially writes these two statements:

var $select = $("<select></select>"); $("#menu").append($select);

This appends the pair of select element tags to the #menu in the HTML (I think!).

Then he writes the code to iterate through the #menu anchors in the HTML and creates a select option for each anchor in the #menu. As each iteration though the menu anchors occurs, these statements are performed to create the individual $options for the $select:

var $anchor = $(this); var $option = $("<option></option>"); $option.val($anchor.attr("href")); $option.text($anchor.text());

and finally this statement:

$select.append($option);

My question is to be sure I understand this properly. I first thought that what he would be appending to the $select each time would be this: <option></option> and then the href and then the text…and I was confused because I thought the href and text needed to be between the <option> and </option> tags…But is what he is appending actually a detached jQuery object that he has created by using the $ in front of $option when he creates the var $option as the statement above is executed to do this? And then he adds the href and the text as object properties into that object and then finally adds this new $option object into the <select></select> object? And it is because these are objects, and not just a sequential set of data items that all this works? Am I understanding this correctly??? Thanks in advance for info or comments!

1 Answer

Steven Parker
Steven Parker
229,785 Points

:point_right: You seem to have a correct understanding for the most part. :+1:

There's just a couple of things I would describe differently:

    ...a detached jQuery object that he has created by using the $ in front of $option...

What actually creates the new object is this code: $("<option></option>"), which is then assigned to the variable named $option. The $ symbol in the name $option has no function but serves as a reminder that this variable is used to hold a reference to a jQuery object. It's just a variable naming convention.

    ...then he adds the href and the text as object properties into that object...

You are correct that the href from the anchor is being added as the value property of the option. But the text of the anchor becomes the content of the option (it will go between the tags).

And yes, this works because the items are objects and the methods being used are object methods.

John Conlin
John Conlin
3,801 Points

Awesome Steven! Thanks for your fast and detailed reply back! You have confirmed what I was thinking, which was that the key is that these are jQuery objects, not just items that are holding data. For me this concept of jQuery being made up of objects and being utilized via object methods is key to trying to understand what the heck is going on! Thanks again for confiming! Have a great day!