1 
$('#div_search').keypress(function() {
    var search_term = $(this).val();
    $('.ticker_list').children('div').each(function() {
        var search_value = $(this).attr('search_term');
        if (search_value.indexOf(search_term) >= 0) {
            $(this).show();
        }
        else {
            $(this).hide();
        }
    });
});​

これは非常に遅いです。500 div を実行し、各 'search_term' 属性を検索して、入力された検索語が属性に含まれているかどうかを確認するため、これは理にかなっています。これを行うためのより良い方法またはより速い方法はありますか? より良い検索メカニズムにも興味があります。

必要に応じて DOM を変更することもできます。

編集 申し訳ありませんが、検索用語は「こんにちは、今日のジョニー」であり、「こんにちは」、「今日」、「ジョニー」という用語はtrueを返す必要があると言うべきでした。これが、上記のスクリプトでindexOfを使用していた理由です。

4

4 に答える 4

5

これは単純な CSS セレクターです。

$(".ticker_list > div[search_term*="+search_term+"]")

search_termただし、内容によっては、エスケープする必要がある場合があります。

于 2012-05-27T21:04:53.687 に答える
1 
var search_term = this.value;
$('.ticker_list > div[search-term*="' search_term + '"]').show();

ノート：

  • data-*独自の属性を作成するのではなく、属性を使用して DOM 要素の「メタデータ」を保存することをお勧めします。
  • jQuery を使いすぎないでください。this.valueの代わりに で入力値を取得できます$(this).val()。
  • コストのかかる操作の場合は、keypressイベントからイベントへchange、または少なくともkeyupイベントへの移動でパフォーマンスが向上します。
  • コードをさらに改善する必要がある場合は、キャッシュ$(this)を使用すると、コードを少し高速化できます。
于 2012-05-27T21:05:01.427 に答える
0

これの方が速いと思いますか？

$('#div_search').on('keypress', function(){
       var search_term = this.value,
           elems = document.getElementsByClassName('ticker_list')[0].children;
       for (i=0; i<elems.length; i++) {
           var search_value = elems[i].getAttribute('search_term');
           elems[i].style.display = (search_value.indexOf(search_term) != -1?'block':'none');
       }
});​

フィドル

于 2012-05-27T21:33:29.183 に答える
0

ここでjsperfを作りました

Jsfiddle http://jsfiddle.net/C9m2K/2/

ループ内の要素を非表示にしたり表示したりしないなど、いくつかの小さな最適化を行うと、速度が少し向上しましたが、それでも検索語をjavascriptオブジェクトに保存する方がはるかに高速でした。

あなたはそれを次のように構築することができます：

var searchArray = $('.ticker_list').children('div').map( function( elem ){
    return {
        value: $(this).attr( "search_term" ),
        elem: this
    };
}).toArray();

また、ループ内で非表示と表示を切り替えないでください。検索語が1回しか一致しない場合は、前に表示された要素を非表示にした可能性があるときに、非表示を499回呼び出しています。

$('#div_search').keyup( function() {
    var previouslyShown = [],
        i, len = searchArray.length;

    return function(e) {
        var cur,
            searchTerm = $(this).val();

        $( previouslyShown ).hide();
        previouslyShown = [];
        for( i = 0; i < len; ++i ) {
            cur = searchArray[i];

            if( cur.value.indexOf( searchTerm ) >= 0 ) {
                $( cur.elem ).show();
                previouslyShown.push( cur.elem );
            }
        }

    };
}());
于 2012-05-27T22:05:59.277 に答える