title: Jquery: Add class to every second visible element
body: <p>I'm trying to create a dynamic portfolio gallery where you can hide show items by clicking categories. Everything works apart from adding a class to elements hidden/showing when categories are clicked.</p>
  
  <p>I currently have:</p>
  
  <pre><code>$(document).ready(function() {
   $('ul.filter a').click(function() {
    $(this).css('outline','none');
    $('ul.filter .current').removeClass('current');
    $(this).parent().addClass('current');
  
    var filterVal = $(this).text().toLowerCase().replace(' ','-');
  
    if(filterVal == 'all') {
     $('div.portfolio .hidden').fadeIn('slow').removeClass('hidden');
    } else {
  
     $('div.portfolio').each(function() {
      if(!$(this).hasClass(filterVal)) {
       $(this).fadeOut('normal').addClass('hidden');
      } else {
       $(this).fadeIn('slow').removeClass('hidden').addClass("show");
  
       $('.portfolio:visible').each(function (i) {
        if (i % 2 == 0) $(this).addClass("last"); // This is the part that doesn't seem to work
       });
  
      }
     });
    }
  
    return false;
   });
  });
  </code></pre>
  
  <p>It's this part of the code that seems to have the problem:</p>
  
  <pre><code>$('.portfolio:visible').each(function (i) {
                  if (i % 2 == 0) $(this).addClass("last");  // This is the part that doesn't seem to work
              });
  </code></pre>
  
  <p>Basically, I'm looking to add the class .last to every second "visible" item in my portfolio list.</p>
  
  <p>Anyone?</p>
  
  <hr>
  
  <p>CSS</p>
  
  <pre><code>/* --------------  Portfolio List  ---------------- */
  #portfolio-items {
      font-size: 11px;    
  }
  
  #portfolio-items ul, #portfolio-items li {
      list-style:none;    
  }
  #portfolio-items .portfolio {
      float:left;
      width:265px;
      height:145px;
      margin:0px 60px 50px 0px;
      display:block;
  }
  #portfolio-items .portfolio .portfolio-client {
      float:left;
      font-size: 11px;
      color: #666;
      text-decoration: none;
  }
  #portfolio-items .portfolio.last {
      margin-right:0px;   
  }
  #portfolio-items .portfolio img {
      border:solid 6px #fff;
      -moz-box-shadow: 1px 1px 3px #999; /* Firefox */
      -webkit-box-shadow: 1px 1px 3px #999; /* Safari, Chrome */
      box-shadow: 1px 1px 3px #999; /* CSS3 */
      margin: 0px 0px 5px;
  
      transition: all .3s; /* in Safari, every animatable property triggers an animation in .2s */
      -o-transition: all .3s; /* in Safari, every animatable property triggers an animation in .2s */
      -webkit-transition: all .3s; /* in Safari, every animatable property triggers an animation in .2s */
      -moz-transition: all .3s; /* in Safari, every animatable property triggers an animation in .2s */
  
      transform-origin: centre; /* in Safari, the origin for transformation */
      -o-transform-origin: centre; /* in Firefox, the origin for transformation */
      -webkit-transform-origin: centre; /* in Safari, the origin for transformation */
      -moz-transform-origin: centre; /* in Firefox, the origin for transformation */
  }
  
  #portfolio-items .portfolio img:hover {
      -moz-box-shadow: 1px 1px 6px #999; /* Firefox */
      -webkit-box-shadow: 1px 1px 6px #999; /* Safari, Chrome */
      box-shadow: 1px 1px 6px #999; /* CSS3 */
  
      transform: scale(1.05);
      -o-transform: scale(1.05);
      -webkit-transform: scale(1.05);
      -moz-transform: scale(1.05);
  
      box-shadow: 0px 0px 20px #ccc;
      -o-box-shadow: 0px 0px 20px #ccc;
      -webkit-box-shadow: 0px 0px 20px #ccc;
      -moz-box-shadow: 0px 0px 20px #ccc;
  }
  
  .view-project {
      background: url(/themes/cogo/default_site/images/view-project.png) no-repeat right center;
      display: block;
      float: right;
      height: 14px;
      width: 87px;
      padding-right: 20px;
      text-align: right;
  }
  </code></pre>
  
  <hr>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="portfolio-items"&gt; 
      &lt;div class="portfolio first cms content-management e-commerce clothing kids shops toys"&gt; 
          &lt;a href="http://ee.dev/portfolio/detail/be-my-bear"&gt; 
              &lt;img src="/images/sized/themes/site_themes/cogo/images/uploads/bemybear-project-254x139.jpg" width="254" height="139" title="Be My Bear" /&gt; 
          &lt;/a&gt;
          &lt;a href="http://ee.dev/clients/be-my-bear" class="portfolio-client"&gt;Be My Bear&lt;/a&gt; 
          &lt;a href="http://ee.dev/portfolio/detail/be-my-bear" class="view-project"&gt;&lt;span&gt;View Project&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
  
      &lt;div class="portfolio last cms content-management business-services"&gt; 
          &lt;a href="http://ee.dev/portfolio/detail/joloda"&gt; 
              &lt;img src="/images/sized/themes/site_themes/cogo/images/uploads/joloda1-254x139.jpg" width="254" height="139" title="Joloda International Ltd" /&gt; 
          &lt;/a&gt; 
          &lt;a href="http://ee.dev/clients/joloda-international" class="portfolio-client"&gt;Joloda International&lt;/a&gt; 
          &lt;a href="http://ee.dev/portfolio/detail/joloda" class="view-project"&gt;&lt;span&gt;View Project&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
  
      &lt;div class="portfolio first buddypress cms content-management wordpress business-services coaching events training"&gt; 
          &lt;a href="http://ee.dev/portfolio/detail/nwwn"&gt; 
              &lt;img src="/images/sized/themes/site_themes/cogo/images/uploads/nwwn-project-254x139.jpg" width="254" height="139" title="NWWN" /&gt; 
          &lt;/a&gt; 
          &lt;a href="http://ee.dev/clients/north-wales-womens-network" class="portfolio-client"&gt;North Wales Women&amp;#8217;s Network&lt;/a&gt; 
          &lt;a href="http://ee.dev/portfolio/detail/nwwn" class="view-project"&gt;&lt;span&gt;View Project&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
  
      &lt;div class="portfolio last e-commerce jewellery shops"&gt; 
          &lt;a href="http://ee.dev/portfolio/detail/italian-world"&gt; 
              &lt;img src="/images/sized/themes/site_themes/cogo/images/uploads/italianworld-254x139.jpg" width="254" height="139" title="Italian World" /&gt; 
          &lt;/a&gt; 
          &lt;a href="http://ee.dev/clients/italian-world" class="portfolio-client"&gt;Italian World&lt;/a&gt; 
          &lt;a href="http://ee.dev/portfolio/detail/italian-world" class="view-project"&gt;&lt;span&gt;View Project&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
  
      &lt;div class="portfolio first cms content-management drupal designers printers"&gt; 
          &lt;a href="http://ee.dev/portfolio/detail/mms-almac"&gt; 
              &lt;img src="/images/sized/themes/site_themes/cogo/images/uploads/mms-project-254x139.jpg" width="254" height="139" title="MMS Almac" /&gt; 
          &lt;/a&gt; 
          &lt;a href="http://ee.dev/clients/mms-almac-ltd" class="portfolio-client"&gt;MMS Almac Ltd&lt;/a&gt; 
          &lt;a href="http://ee.dev/portfolio/detail/mms-almac" class="view-project"&gt;&lt;span&gt;View Project&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
  
      &lt;div class="portfolio last cms content-management charity community training"&gt; 
          &lt;a href="http://ee.dev/portfolio/detail/europe-direct"&gt; 
              &lt;img src="/images/sized/themes/site_themes/cogo/images/uploads/europedirect-project-254x139.jpg" width="254" height="139" title="Europe Direct" /&gt; 
          &lt;/a&gt; 
          &lt;a href="http://ee.dev/clients/ectarc" class="portfolio-client"&gt;Ectarc&lt;/a&gt; 
          &lt;a href="http://ee.dev/portfolio/detail/europe-direct" class="view-project"&gt;&lt;span&gt;View Project&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;     
  &lt;/div&gt;?
  </code></pre>
  
  <hr>
  
  <p>FILTER MENU</p>
  
  <pre><code>&lt;ul class="filter"&gt; 
  
  
                                                                      &lt;li class="booking-systems"&gt;&lt;a href="http://ee.dev/portfolio/category/booking-systems"&gt;Booking Systems&lt;/a&gt;&lt;/li&gt; 
  
  
  
                                                                      &lt;li class="buddypress"&gt;&lt;a href="http://ee.dev/portfolio/category/buddypress"&gt;Buddypress&lt;/a&gt;&lt;/li&gt; 
  
  
  
                                                                      &lt;li class="cms"&gt;&lt;a href="http://ee.dev/portfolio/category/cms"&gt;CMS&lt;/a&gt;&lt;/li&gt; 
  
  
  
                                                                      &lt;li class="content-management"&gt;&lt;a href="http://ee.dev/portfolio/category/content-management"&gt;Content Management&lt;/a&gt;&lt;/li&gt; 
  
  
  
                                                                      &lt;li class="drupal"&gt;&lt;a href="http://ee.dev/portfolio/category/drupal"&gt;Drupal&lt;/a&gt;&lt;/li&gt; 
  
  
  
                                                                      &lt;li class="e-commerce"&gt;&lt;a href="http://ee.dev/portfolio/category/e-commerce"&gt;E-Commerce&lt;/a&gt;&lt;/li&gt; 
  
  
  
                                                                      &lt;li class="silverstripe"&gt;&lt;a href="http://ee.dev/portfolio/category/silverstripe"&gt;Silverstripe&lt;/a&gt;&lt;/li&gt; 
  
  
  
                                                                      &lt;li class="wordpress"&gt;&lt;a href="http://ee.dev/portfolio/category/wordpress"&gt;Wordpress&lt;/a&gt;&lt;/li&gt; 
  
  
                                                                      &lt;/ul&gt; 
  </code></pre>