Can someone walk me along this line?

Question

var types = { "Grocery": "gro", "Restaurant": "res", "Bar": "bar", "Pizza Delivery": "piz", "Quick Service": "qui", "Retail": "ret", "Salon": "sal" } $(".type_changer").attr("id", types[$(this).text()]); 

I understand that the type_changer id class changes to part of this array, but I don't understand types[$(this).text()]

and this line

 $(this).parents('.select-holder').find('.text').text($(this).text()); 

seems pretty .parents , but I'm confused about .parents and .find('.text').text($(this).text());

Answer 1

$(this).text() takes the text of the current element ( <li> , which you loop in your case if your markup has not changed).

He then uses this text as a key in the types object, basically doing types["Grocery"] when you click on the "Grocery" link, for example.

In JavaScript, you can do types.Grocery or types["Grocery"] to access a property that has the value "gro" .

---

The last statement takes the same Grocery test and sets it as text for the class="text" element in the parent.

Answer 2

$(this).text() will receive the text inside the current DOM element, and it will use this text to find the corresponding value in the array (for example, types['Restaurant'] ).

Answer 3

In each element that has the class 'type-changer', change its ID to the value displayed in types on the text in the element, for example.

 <div class="type-changer">Salon</div> 

will be converted to

 <div class="type-changer" id="sal">Salon</div>