If we are using .each() to iterate through each item, how does $select.append($option) add in ALL the options?

Question

Hi,

To cycle over the menu links, we used .each() method and making changes to them. How does that include ALL the options element when added --- $select.append($option); when it is only looping each at a time ? (I would assume it would append 1x option, not all?)

//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>");


  //option's value is the href
  $option.val($anchor.attr("href"));
  //options's text is the text of link
  var anchorText = $anchor.text();
  $option.text(anchorText);
  //append option to select
  $select.append($option);
});

Answer 1 · 2015-08-02T14:36:38Z

August 2, 2015 2:36pm

The $().each() method is essentially a loop.

If you take a look at the code you can see that between the braces of .each() you put a function that generates an "option" tag and puts it between the "select" tags (one option element of the drop down menu).

The $("#menu a") part tells the .each() method, that you want to iterate through each "a" tag that can be found inside the div with the "menu" id.

What happens here is that every time the method finds an "a" tag it executes the function that you put inside the .each() method.

In this case it executes the function six times thus adds 6 "option" tags to the website.

MOD NOTE: Change from "Comment" to "Answer" so that it is able to be up-voted and/or marked as "Best Answer"

Welcome to the Treehouse Community

Looking to learn something new?

Howie Yeo

Howie Yeo

If we are using .each() to iterate through each item, how does $select.append($option) add in ALL the options?

1 Answer

Gabriel D. Celery

Gabriel D. Celery