如何使用filter函數來顯示li？

我想在下拉菜單的。我加入班級，名字 team-MI team-SRH。如果改變事件中使用filter function過濾我li我選擇Mumbai Indians從下拉菜單。它應該只顯示Mumbai Indiansli。 Mumbai Indians已選擇的值是MI使用我想過濾我的列表。如何使用filter函數來顯示li？

可以filter功能做到這一點。

這裏是我的代碼 https://jsbin.com/laritakevi/edit?html,js,output

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
<script src="https://code.jquery.com/jquery-2.0.3.js"></script> 

    <title>JS Bin</title> 
</head> 
<body> 
<select id="patientType"> 
    <option value="All">All</option> 

    <option value="MI">Mumbai Indians</option> 
    <option value="SRH">Sunrisers Hyderabad</option> 
    <option value="RCB">Royal Challengers Bangalore</option> 
    <option value="GL">Gujarat Lions</option> 
    <option value="RPS">Rising Pune Supergiant</option> 
    <option value="KXIP">Kings XI Punjab</option> 

    </select> 

    <ul> 
    <li itemscope="" itemprop="subEvent" class="team-MI team-SRH venue-Mumbai live"> 
     <div class="matchdetails"> 
      <div itemprop="performer" class="match-teams">Mumbai Indians vs Sunrisers Hyderabad</div> 

     </div> 
    </li> 
    <li itemscope="" itemprop="subEvent" class="team-KKR team-KXIP venue-Kolkata"> 
     <div class="matchdetails"> 
      <div itemprop="performer" class="match-teams">Kolkata Knight Riders vs Kings XI Punjab</div> 

     </div> 
    </li> 
    <li itemscope="" itemprop="subEvent" class="team-RCB team-MI venue-Bengaluru"> 
     <div class="matchdetails"> 
      <div itemprop="performer" class="match-teams">Royal Challengers Bangalore vs Mumbai Indians</div> 
     </div> 
    </li> 
    <li itemscope="" itemprop="subEvent" class="team-GL team-RPS venue-Rajkot"> 
     <div class="matchdetails"> 
      <div itemprop="performer" class="match-teams">Gujarat Lions vs Rising Pune Supergiant</div> 
     </div> 
    </li> 
    <li itemscope="" itemprop="subEvent" class="team-KKR team-SRH venue-Kolkata"> 
     <div class="matchdetails"> 
      <div itemprop="performer" class="match-teams">Kolkata Knight Riders vs Sunrisers Hyderabad</div> 
     </div> 
    </li> 
    <li itemscope="" itemprop="subEvent" class="team-DD team-KXIP venue-Delhi"> 
     <div class="matchdetails"> 
      <div itemprop="performer" class="match-teams">Delhi Daredevils vs Kings XI Punjab</div> 
     </div> 
    </li> 
    <li itemscope="" itemprop="subEvent" class="team-MI team-GL venue-Mumbai"> 
     <div class="matchdetails"> 
      <div itemprop="performer" class="match-teams">Mumbai Indians vs Gujarat Lions</div> 
     </div> 
    </li> 

</ul> 
</body> 
</html>

$(function(){ 
    var arr=[]; 
     //all li 
    console.log($('ul li')) 
$('#patientType').on("change",function() { 
    //Your code here 
    console.log(this.value); 
    $('ul li').filter(function(item){ 
    console.log($(item).attr('class').indexOf(this.value)) 
    return $(item).attr('class').indexOf(this.value) != -1 
    }) 
}); 
})

來源

2017-04-12 user944513

爲什麼你需要使用.filter（）？我通常通過隱藏所有元素來解決這些情況，然後顯示符合條件的元素。這種情況按班級'team-'+輸入的值。

這裏是工作的JavaScript的特定情況;

$(function(){ 

    $('#patientType').on("change",function() { 

    var val = $(this).val(); 
    $('ul li').hide(); 
    $('ul').find('.team-' + val).show(); 

    }); 

});

這隱藏所有的列表元素，然後示出了具有匹配的類的那些。

來源

2017-04-12 17:04:10 Rikusor

我認爲，我們還可以使用：

$(function(){ 
    $('#patientType').on("change",function() { 
    var val = $(this).val(); 
    $('ul li').not('.team-' + val).hide(); 
    }); 
});

我還沒有嘗試過，雖然。

來源

2017-04-12 17:45:03 Mayank

嗨，該解決方案將在最後隱藏所有列表元素，因爲它從不顯示任何它們，只隱藏和隱藏。在某些時候，你已經隱藏了他們。 – Rikusor

謝謝，我明白了。我有多愚蠢......只有一次.. – Mayank

如何使用filter函數來顯示li？

回答

相關問題