What does the extra "$()" in "$($())" selector do?

Question

I want to implement a jQuery scrollspy to one of the projects I am working on.

I found this jsfiddle (https://jsfiddle.net/mekwall/up4nu/) which I managed to implement into my project. I wish to modify it but am stuck at trying to understand what this bit of code means.

var topMenu = $("#top-menu"),
menuItems = topMenu.find("a"),
   // Anchors corresponding to menu items
   scrollItems = menuItems.map(function(){
     var item = $($(this).attr("href"));
     if (item.length) { return item; }
});

I know in general, the code will search for all "a" links, find the href via the attr() function, and if it exists, add it into the map. What I don't understand is

 $($(this).attr("href"));

What does the extra $() selector mean? I understand that

$(this).attr("href");

means selecting/retrieving the href for this element. What does the $() do? Is it a nested selector? I tried googling but I couldn't find answers to it, or my google-fu is not up to par.

Also, does

$($(this).attr("href"));

only retrieve links in the following format index.html#section-one or #section-one?

Update

Also, how would '.length' determine if the element exists in the DOM? When I checked the console logs, a href link with 'index.html#section-one' would return a length of 0, while one with only '#section-one' would return with a length of 1. Why does that happen?

Answer 1

That code assumes that the href attribute is going to be an id reference, like #about. The outer $() goes ahead and grabs that #about element for you.

Answer 2

In your case, the href are anchor names (or fragment identifiers), which conveniently double as id selectors. By referencing the href attribute and then wrapping that with $(), you're effectively selecting an element with that id.

So, <a href='#faq'> would normally jump to an named anchor "faq", but by wrapping the attr value of href, you're selecting $('#faq').

Answer 3

$($(this).attr("href"));

In above expression $(this).attr("href") will give href attribute of the specified html element which is string. If you want to convert this string to jQuery object and do further manipulation, you can achieve it using additional $() like

$($(this).attr("href"))