title: hide unwanted element from list of elements using jquery
body: <p>I have a list of div just like this:</p>
  
  <pre><code>&lt;div class="portfolio-categories"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#" id="cat-all" class="active"&gt;ALL WORKS&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" id="cat-1"&gt;Residential&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" id="cat-2"&gt;Commercial&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="portfolio-container"&gt;
      &lt;div class="portfolio-item portfolio-cat-1"&gt;1&lt;/div&gt;
      &lt;div class="portfolio-item portfolio-cat-1"&gt;2&lt;/div&gt;
      &lt;div class="portfolio-item portfolio-cat-1"&gt;3&lt;/div&gt;
      &lt;div class="portfolio-item portfolio-cat-2"&gt;4&lt;/div&gt;
      &lt;div class="portfolio-item portfolio-cat-2"&gt;5&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>There are 3 menus: ALL WORKS, Residential, Commercial. If I click Residential, all "portfolio-item" beside "portfolio-cat-1" will be hidden. The same goes for Commercial, all div "portfolio-item" beside "portfolio-cat-2" will be hidden.</p>
  
  <p>I use .not() for this. Here is my jquery code:</p>
  
  <pre><code>$(".portfolio-categories a").click(function(e){
      e.preventDefault();
  
      var id=$(this).attr("id").split("-")[1];
  
      $(".portfolio-item").not(".portfolio-cat-"+id).fadeOut(400, function(){
          alert("done");
      });
  });
  </code></pre>
  
  <p>The problem is, when I click Residential (cat-1) all portfolio-cat-1 div are hidden instead of portfolio-cat-2. What went wrong? Is it not .not() that I should use? </p>
  
  <p>Any help would be appreciated.</p>