Добавить css в выбранные «элементы» jQuery filter

Question

Я фильтрую свои элементы с помощью этого скрипта, но мне нужно добавить margin:0 в actvive/selected items, чтобы они правильно выстроились правильно.

JS

$(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') { 
      $('ul#items li.hidden').fadeIn('xslow').removeClass('hidden'); 
     } else { 

      $('ul#items li').each(function() { 
       if (!$(this).hasClass(filterVal)) { 
        $(this).fadeOut('normal').addClass('hidden'); 
       } else { 
        $(this).fadeIn('xslow').removeClass('hidden'); 
       } 
      }); 
     } 

     return false; 
    }); 
}); 

Помощь высоко оценил

========================

EDITED HTML ДОБАВЛЕНО

меню:

     <ul id="filter"> 
         <li class="current"><a href="#">All</a></li> 
         <li><a href="#">item1</a></li> 
         <li><a href="#">item2</a></li> 
         <li><a href="#">item3</a></li> 
         <li><a href="#">item4</a></li> 
         <li><a href="#">item5</a></li> 
         <li><a href="#">item6</a></li> 
       </ul> 

и элементы:

     <ul id="items"> 
         <div class="span12"> 

         <li class="item1 span4"> 
         <img src="images/item.jpg" alt=""/> 
         </li> 

         <li class="item2 span4"> 
         <img src="images/item.jpg" alt=""/> 
         </li> 

         <li class="item3 span4"> 
         <img src="images/item.jpg" alt=""/> 
         </li> 

         <li class="item4 span4"> 
         <img src="images/item.jpg" alt=""/> 
         </li> 

         <li class="item5 span4"> 
         <img src="images/item.jpg" alt=""/> 
         </li> 

         <li class="item6 span4"> 
         <img src="images/item.jpg" alt=""/> 
         </li> 

         </div> 
         </ul> 

Как вы можете видеть, я использую TwitterBootsrap 2.X Я aready, используя селектор п-го ребенка, чтобы удалить запас на некоторых .span годов. так что строки элементов правильно отображаются в разных строках.

Answer 1

Если элемент вы клике ваш активный элемент и current ваш активный класс, то попробуйте следующее:

margin:0px Добавить к текущему классу.

Теперь добавьте текущий класс в активный элемент и удалите его из братьев и сестер.

$(this).parent().addClass('current'); // add current class to active element 
$(this).parent().siblings().removeClass('current'); // remove active class from sibling elements.