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

Aaron Selonke
Aaron Selonke
10,323 Points
Posted by Aaron Selonke
Aaron Selonke
10,323 Points

navigating tasks with the each() loop

When Andrew finishes saying what he's trying to do, I'll often stop and look and the method's used in the notes, and try to puzzle the problem out before seeing how he does it.

It turns out that Andrew solved menu by calling the each() loop on the anchors, as you can see here I'm calling it on the list items. It works except for the last two statements in the loop

These two statements return nothing AND do not produce any errors or hints in the DEV tools. Why is that?

   $(this).children("option").text($text); 
   $(this).children("option").attr("value", $href); 

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


$("#menu li").each(function(){
   $select.append($('<option></option>'));
   var $href = ($(this).children("a").attr("href"));
   var $text = ($(this).children("a").text());
   $(this).children("option").text($text); 
   $(this).children("option").attr("value", $href);
john larson
john larson
16,594 Points

I don't have an answer, but I'm going to walk it through in my mind. 1: your looping through the li in the #menu. 2: your appending the option html to the li. 3: you saved the link that is a child of the li in $href. 4: you Got the text of the link. 5: you set the text of the option 6:you set the href of the option. Seems like it ought to work. I can't wait to see what the answer is !

1 Answer

Benjamin Barslev Nielsen
Benjamin Barslev Nielsen
18,958 Points
Benjamin Barslev Nielsen
Benjamin Barslev Nielsen
18,958 Points

The problem is the structure of the DOM tree. let E > F mean that F is a child of E. In your DOM we have:

$('#menu') > $select > $('<option></option>')

, but the elements you are changing in the last two lines should follow this structure, which is not present in the code:

$('#menu') > $('#menu').children('li') > $('<option></option>')

Remember that when you use $("#menu li") the each function is iterating over all the li elements, i.e., the $(this) will be an li element, and these do not have any option children. Therefore the set 

$(this).children("option")

will be empty.

Here is a solution, where you store the newly created option in a variable, and then set the text and attribute directly on this variable:

$("#menu li").each(function(){
   var $option = $('<option></option>');
   $select.append($option);
   var $href = ($(this).children("a").attr("href"));
   var $text = ($(this).children("a").text());
   $option.text($text); 
   $option.attr("value", $href); 
});
Aaron Selonke
Aaron Selonke
10,323 Points
Aaron Selonke
Aaron Selonke
10,323 Points

I worked it out a little after I posted the question. Thanks for breaking it down.