將css添加到選定的「項目」jQuery過濾器

Question

我正在使用此腳本過濾我的項目，但我需要將margin:0添加到活動/選定項目，以便它們正確排列。

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 ADDED

菜單：

     <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使用第n個孩子選擇器，以消除某些.span的保證金 。以便項目在不同行中正確排列。

Answer 1

如果你點擊的元素是你的有源元件和current是活動類，那麼試試這個：

添加margin:0px到當前類。

.current { margin : 0px !important; } 

現在將當前類添加到活動元素並將其從兄弟中刪除。

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