title: How to set key value of array in jquery
body: <p>I have this really ugly bit of code that sets the key =&gt; value of the menu_items array. I would like to use the map function to set the key and value from the ul but couldn't work it out so resorted to this.</p>
  <p>How can I use the map function to set key and value for menu_items?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function ClothingSetup(clothing) {
    var menu_items = {};
    menu_items["hat"] = "hat";
    menu_items["mask"] = "mask";
    menu_items["coat"] = "coat";
    menu_items["shirt"] = "shirt";
    menu_items["gloves"] = "gloves";
    menu_items["pants"] = "pants";
    menu_items["boots"] = "boots";
    menu_items["bandana"] = "bandana";
  
    $.each(clothing, function(index, item) {
      if (index == menu_items[index] &amp;&amp; item &gt; 1) {
        $('#' + index).toggleClass("active");
      }
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul&gt;
    &lt;li class="nav-cat" id="hat" value="1"&gt;&lt;img src="/html/img/hat.png"&gt;&lt;/li&gt;
    &lt;li class="nav-cat" id="mask" value="1"&gt;&lt;img src="/html/img/mask.png"&gt;&lt;/li&gt;
    &lt;li class="nav-cat" id="coat" value="1"&gt;&lt;img src="/html/img/coat.png"&gt;&lt;/li&gt;
    &lt;li class="nav-cat" id="shirt" value="1"&gt;&lt;img src="/html/img/shirt.png"&gt;&lt;/li&gt;
    &lt;li class="nav-cat" id="gloves" value="1"&gt;&lt;img src="/html/img/gloves.png"&gt;&lt;/li&gt;
    &lt;li class="nav-cat" id="pants" value="1"&gt;&lt;img src="/html/img/pants.png"&gt;&lt;/li&gt;
    &lt;li class="nav-cat" id="boots" value="1"&gt;&lt;img src="/html/img/boots.png"&gt;&lt;/li&gt;
    &lt;li class="nav-cat" id="bandana" value="1"&gt;&lt;img src="/html/img/bandanna.png"&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>