선택한 "css"항목에 jQuery 필터를 추가하십시오.

Question

이 스크립트로 항목을 필터링하고 있지만 정확히 일치하도록 actvive/selected 항목에 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

     <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> 

: HTML은

메뉴를

추가

및 항목 :

     <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 년대에 마진을 제거하는 n 번째 자식 선택기를 사용하고 를 사용하고 볼 수 있듯이. 항목이 다른 행에 올바르게 줄 수 있습니다. 당신은 클릭하는 요소가 활성 요소이고 current는 활성 클래스 인 경우

Answer 1

,이 시도 :

는 현재 클래스에 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.