jquery - ul의 요소 표시

Question

특정 클래스에서 elment base를 숨기는 작은 스크립트가 있습니다. 이는 포트폴리오의 필터와 같습니다.

이 내 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 == 'tutti') { 
      $('ul#elencoProdotti li.hidden').fadeIn('slow').removeClass('hidden'); 
     } else { 
      $('ul#elencoProdotti li').each(function() { 
       if(!$(this).hasClass(filterVal)) { 
        $(this).fadeOut(500, function(){ 
         $(this).addClass('hidden'); 
        }); 
       } else { 
        $(this).fadeIn(500, function(){ 
         $(this).removeClass('hidden') 
        }); 
       } 
      });   
     }   
     return false; 
    }); 
}); 

그리고 이것은 내 코드입니다 :

이

<ul class="hidden-xs" id="filter"> 
    <li class=""><a href="#">Tutti</a></li> 
      <li class="current"><a href="">Tasche risparmio energetico</a></li> 
      <li><a href="">Smart Card</a></li> 
      <li><a href="">Serrature elettroniche</a></li> 
      <li><a href="">Controllo Temperatura</a></li> 
      <li><a href="">Cilindri</a></li> 
    </ul> 
<ul id="elencoProdotti"> 
<li class="tutti cilindri" style="display: list-item;"> 
       <div class="row row-prodotti"> 
        <div class="col-md-4"><img class="img-responsive center-block" alt="Cilindro Elettronico" src="/tecnos-security/files/large/7fdce155b3dfab5f750eb1b684100452.jpg"></div> 
        <div class="col-md-5 testo_intro"> 
         <h2><a href="/tecnos-security/prodotti/dettagli/cilindro-elettronico">Cilindro Elettronico</a></h2> 
         <p>Il cilindro elettronico può essere facilmente installato al posto di qualsiasi cilindro meccanico&nbsp;rappresentando la soluzione piu’ semplice ed economica per sostituire su qualsiasi porta&nbsp;esistente le tradizionali chiavi meccaniche con tessere Rfid (Trasponder).</p> 
         <span class="leggi"> 
          <a href="tecnos-security/prodotti/dettagli/cilindro-elettronico">scheda tecnica &gt;&gt;</a> 
         </span> 
        </div> 
        <div class="col-md-3"> 
         <div class="row"> 
                 <div class="col-md-3"> 
           <a href="/tecnos-security/files/download/125deff1f25a6e9" style="border: none;"> 
            <img src="tecnos-security/addons/shared_addons/themes/tecnos/img/multilingua/pdf.png" alt="multilingua/pdf.png" class="img-responsive"> 
           </a> 
          </div> 
          <div class="col-md-6"> 
           <div style="font-weight: bold;">Depliant</div> 
           <div style="font-weight: bold;"> 
            <a href="tecnos-security/files/download/125deff1f25a6e9">Download File</a> 
           </div> 
          </div> 
                </div>     
        </div> 
       </div> 
      </li> 
<li class="tutti smart-card"> 
       <div class="row row-prodotti"> 
        <div class="col-md-4"><img class="img-responsive center-block" alt="Tessera Smart Card di prossimità MIFare Philips" src="files/large/231eb169b9edc8ecab8a6b82c1006e1a.png"></div> 
        <div class="col-md-5 testo_intro"> 
         <h2><a href="tecnos-security/prodotti/dettagli/tessera-smart-card-di-prossimita-mifare-philips">Tessera Smart Card di prossimità MIFare Philips</a></h2> 
         <ul> 
<li style="display: list-item;" class="">Codice identificativo selezionato in modo casuale fra oltre 4 miliardi di combinazioni</li> 
<li style="display: list-item;" class="">Leggibile e riscrivibile fino a 100.000 volte</li> 
<li style="display: list-item;" class="">Personalizzazione tessere con logo, immagini, etc.</li> 
</ul> 
         <span class="leggi"> 
          <a href="/tecnos-security/prodotti/dettagli/tessera-smart-card-di-prossimita-mifare-philips">scheda tecnica &gt;&gt;</a> 
         </span> 
        </div> 
        <div class="col-md-3"> 
         <div class="row"> 
                </div>     
        </div> 
       </div> 
      </li> 
</ul> 

스크립트는 잘 작동하지만, 목록에 일부 <li> 요소 내가 원하는 그 있다는 것을 어떻게 예 : testo_intro 클래스에 표시됩니다. 해당 클래스에 <li>을 표시하려면 어떻게해야합니까?

편집 :

여기

데모 : http://jsfiddle.net/A2QtM/2

해결 :

if($('div.row-prodotti div.testo_intro').is(':visible')) 
{ 
    $('div.testo_intro li').show().removeClass('hidden'); 
} 

Answer 1

이 .testo_intro에 li의를 보여 :

내가 마지막 else 부분 후에이 코드를 사용

을

$('.testo_intro li').show() 

Answer 2

시도는 $ (". testo_intro 리")를 넣어 표시()를 각각 외부, 같은 :. 나는이 코드를 넣어 시도

$(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 == 'tutti') { 
     $('ul#elencoProdotti li.hidden').fadeIn('slow').removeClass('hidden'); 
    } else { 
     $('ul#elencoProdotti li').each(function() { 
      if(!$(this).hasClass(filterVal)) { 
       $(this).fadeOut(500, function(){ 
        $(this).addClass('hidden'); 
       }); 
      } else { 
       $(this).fadeIn(500, function(){ 
        $(this).removeClass('hidden') 
       }); 
      } 
     }); 
     if($('.testo_intro').is(':visible'))//this should be outside from each function 
      $('.testo_intro li').show();  
    }   
    return false; 
    }); 
    });