title: Understanding the usage of get() in my sorting script
body: <p>I recently found a code snippet that I would really like to understand:</p>
  
  <pre><code>var buttons = $('#fruit,#vegetable,#meat').click(function() {
      $(this).toggleClass('active');
      var classes = buttons.filter('.active').map(function() {
          return this.id;
      }).get().join(',.');
      $('div.fruit,div.vegetable,div.meat').hide().
          filter('.' + (classes || 'none')).show();
  });
  </code></pre>
  
  <p>The HTML code : </p>
  
  <pre><code>&lt;div style="float:right; padding:25px;"&gt;
      &lt;button id="fruit" class="active"&gt;&lt;span&gt;fruit&lt;/span&gt;&lt;/button&gt;
      &lt;button id="vegetable" class="active"&gt;vegetable&lt;/button&gt;
      &lt;button id="meat" class="active"&gt;meat&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
         &lt;p&gt;Trying to use buttons as an "or" case rather than "and." When choosing fuit or vegetable, I want to see tomato as part of each list, &lt;em&gt;not just&lt;/em&gt; when both are selected.&lt;/p&gt;  
  
  &lt;div class="fruit"&gt;
      &lt;p&gt;apple&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="vegetable"&gt;
      &lt;p&gt;pumpkin&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="vegetable"&gt;
     &lt;p&gt;okra&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="fruit"&gt;
      &lt;p&gt;orange&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="meat"&gt;
      &lt;p&gt;beef&lt;/p&gt;
  &lt;/div&gt;    
  
  
  &lt;div class="fruit vegetable"&gt;
      &lt;p&gt;tomato&lt;/p&gt;
  &lt;/div&gt;    
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The fiddle is <a href="http://jsfiddle.net/61nc1rpk/12/" rel="nofollow">here</a>.</p>
  
  <p>I do understand how all the methods work in jQuery like <code>toggleclass</code>, <code>filter</code> and <code>map</code>, I also understand how <code>join</code> works in JS, but in this particular example, I am not able to figure out how <code>get()</code> is working or rather what is it's usage in the script is.  </p>
  
  <p>I went through the jQuery documentation for <a href="https://api.jquery.com/get/" rel="nofollow">get()</a> and I came across this method for the first time; to me, it seems it's very much similar to <code>eq()</code> in jQuery, but I am still not able to figure out why exactly <code>get</code> is being used in my example.</p>
  
  <p>Can somebody explain this to me ? </p>