Question

这是我的代码...我想要做的就是使用jquery通过我从数据库中提取的记录的“数据集”进行过滤。

这是我的代码，但效率非常高。

<script>
$(document).ready(function(){
   $("#descriptionField").bind('keyup',function(e){
        var filter = $(this).val();
        if(filter)
        {
            $("#list").find("a:not(:contains(" + filter + "))").parent().slideUp();
            $("#list").find("a:contains(" + filter + ")").parent().slideDown();
        }
   });
 });
 </script>

Answer 1

您始终可以缓存多次使用的选择：

$(function(){
   var $A = $('#list').find('a');
   $("#descriptionField").bind('keyup',function(e){
        var filter = this.value;
        if(filter.length > 0)
        {
            $A.filter(":not(:contains(" + filter + "))").parent().hide();
            $A.filter(":contains(" + filter + ")").parent().show();
        }
   });
});

我删除了动态slideDown()和slideUp()函数调用，以减少CPU密集度show()和hide()。此外，我使用this.value而不是使用jQuery来获取输入的值，这应该更快一些。

您可以使用:not()来执行此操作，而不是使用:contains()和filter()的伪选择器：

$(function(){
   var $A = $('#list').find('a');
   $("#descriptionField").bind('keyup',function(e){
        var filter = this.value;
        if(filter.length > 0)
        {
            $A.filter(function () {
                return ($(this).text().indexOf(filter) === -1)
            }).parent().hide();
            $A.filter(function () {
                return ($(this).text().indexOf(filter) > -1)
            }).parent().show();
        }
   });
});

以下是一个jsperf，用于显示使用.filter()而不是:contains()时的效果提升：http://jsperf.com/jquery-contains-vs-filter

用于过滤记录的Jquery代码。最好的技术/代码

1 个答案: