0

結果をフィルタリングした後、「ゼブラ」リストを表示するのに問題があります。ここに完璧に表示されるゼブラリストがあります。コードは次のとおりです。

$('ul li:odd').addClass('zebra_odd');
$('ul li:even').addClass('zebra_even');

このリストを次のようにフィルタリングすると、問題が発生します。

  $('input').keyup(function() {                   
    var textboxVal = $(this).val().toLowerCase();   
    $('ul li').each(function() {                    
    var listVal = $(this).text().toLowerCase();     
      if(listVal.indexOf(textboxVal) >= 0) {      
        $(this).show();                        
      } else {
        $(this).hide();                         
      }

つまり、リストには次a1, b1, a2, b2, a3, b3.の値があります。リストにはゼブラ行の値が完全に表示されますが、データをフィルタリングすると、つまり「a」の場合、a1、a2、a3がすべて白い背景で表示され、古いものは奇数、偶数のままになります。値。ありがとう

4

1 に答える 1

2

odd,evenこのように要素をフィルタリングした後、クラスを更新する関数を書くことができます

function setOddEven() {
    $('li:visible:odd').removeClass('odd even').addClass('odd');
    $('li:visible:even').removeClass('odd even').addClass('even');
}
$(function() {
    setOddEven();
    $('input').keyup(function() {
        var textboxVal = $(this).val().toLowerCase();
        $('ul li').each(function() {
            $this = $(this); // cache the object for better performance
            var listVal = $this.text().toLowerCase();
            if (listVal.indexOf(textboxVal) >= 0) {
                $this.show();
            } else {
                $this.hide();
            }
        });
        setOddEven();
    });
});​

ワーキングフィドル

セレクターを忘れないでください。そうしない:visibleと、非表示の要素が考慮されるため、正しく機能しません。

于 2012-06-15T17:07:33.400 に答える