使用jQuery過濾錶行列表

Question

此列表不是過濾器，在過濾器執行前後獲得相同的長度。 txt和val值是正確的。

$("#filter").on('keyup', function(e){ 
    var val = this.value.toLowerCase(); 

    c.log('trs', $trs.length); 
    $trs.filter(function(i){ 
    var $el = $(this).find('td:nth-child(2) a') 
     , txt = $el.text().toLowerCase(); 

    //c.log('test', txt, val); 
    return !!txt.indexOf(val); 
    }); 

    c.log('trs', $trs.length); 
}); 

下面是HTML：

<tr> 
    <td class="numeric"><a id="btc" class="rank">1</a></td> 
    <td> 
     <img src="img/Bitcoin.png" class="currency-logo"> 
     <a href="http://www.bitcoin.org" target="_blank">Bitcoin</a> 
    </td> 
</tr> 
<tr> 
    <td class="numeric"><a id="ltc" class="rank">2</a></td> 
    <td> 
     <img src="img/Litecoin.png" class="currency-logo"> 
     <a href="http://litecoin.org" target="_blank">Litecoin</a> 
    </td> 
</tr> 

Answer 1

你只是認爲filter會做源對象上的修改。但事實並非如此。它實際上會根據其中提供的條件返回一組filtered elements。請閱讀更多關於here。

試試這個，

$("#filter").on('keyup', function(e){ 

    var val = this.value.toLowerCase();  
    c.log('trs', $trs.length); 

    c.log('trs', $trs.filter(function(i){ 
     var $el = $(this).find('td:nth-child(2) a'); 
     var txt = $el.text().toLowerCase(); 
     return txt.indexOf(val) > -1; 
    }).length; 
    ); 

});