Question

$('#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'属性以查看输入搜索词是否在attr中。有更好或更快的方法吗？我甚至对更好的搜索机制感兴趣。

我也可以根据需要修改DOM。

修改对不起我应该提到说搜索术语是“你好今天约翰尼”，术语“你好”，“今天”和“约翰尼”必须返回true，这就是为什么我在上面的脚本中使用indexOf。

Answer 1

这是一个简单的CSS选择器：

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

您可能需要转义search_term，具体取决于它可能包含的内容。

Answer 2

var search_term = this.value;
$('.ticker_list > div[search-term*="' search_term + '"]').show();

注意：

您最好使用data-*属性来存储DOM元素的“元数据”，而不是创建自己的属性。
不要过度使用jQuery！您可以使用this.value而非$(this).val()获取输入值。
如果这是一项昂贵的操作，您将获得性能提升，从keypress事件转移到change或至少keyup事件。
如果您需要进一步改进代码，请缓存$(this)，it can speed up you code a bit。

Answer 3

我认为这更快？

$('#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');
       }
});

FIDDLE

Answer 4

我制作了一个jsperf here

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();

你也不应该在循环中切换隐藏和显示，如果搜索词只匹配一次，那么你正在调用hide 你可以隐藏之前显示的元素的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 );
            }
        }

    };
}());

在jQuery中搜索许多div的属性

4 个答案: