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

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.