Can someone walk me through 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 class type_changer id is being changed to the 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 almost understandable but I get confused on the .parents and the .find('.text').text($(this).text());

Answer 1

$(this).text() will get 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 2

The $(this).text() takes the text of the current element (the <li> you're looping over in your case, unless your markup has changed).

It then uses that text as the key on the types object, basically doing types["Grocery"] when you click the "Grocery" link for example.

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

---

The last statement is taking that same "Grocery" test and setting it as the text for the class="text" element in the parent.

Answer 3

On every element that has class 'type-changer', change it's ID to the value mapped in types to the text in the element, eg.

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

would be converted to

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