Question

我有1个ul，里面有10000里我需要用包含simbols来过滤它们。

我正在使用Jquery 2.1.3 并写了这个函数

$("#filter").keyup(function(){
        var filter = $(this).val(), count = 0;
        if(!filter){
            $(".wordlist li").slideUp('slow', function(){
                $('.wordlist').css({'border': 'none', 'background': 'transparent'});
            });
            return;
        }
        var regex = new RegExp(filter, "i");
        $('.wordlist li').each(function(){
            if ($(this).find('.trans').text().search(regex) < 0) {
                $(this).slideUp('slow');
            } else {
                $(this).slideDown('slow');
                count++;
            }
        });
    });

这段代码工作得很好但是使用jquery .each()

进行搜索需要非常大的时间

我需要在最短的时间内完成这项工作。

任何人都可以帮助我吗？

这是小提琴手，我正在做什么 https://jsfiddle.net/giasoft/4o84t1fp/

Answer 1

首先，在为每个元素执行以下代码时：

if ($(this).find('.trans').text().search(regex) < 0)...

执行10000选择器查询。

为避免这种情况，您可以在页面加载时将数据分配给元素，而不是每次都搜索内容

$('.wordlist li').each(function() {
  this.word=$(this).find('.trans').text();
});

然后将此选择器替换为：

if (this.word.search(regex) < 0) {

请在此处找到它： https://jsfiddle.net/mcao0xhy/1/

此外，您可以将其分配给.data()而不是对象属性 - 这将是更好的方式。

$('.wordlist li').each(function() {
  $(this).data('word')=$(this).find('.trans').text();
});

然后：

if (this.data('word').search(regex) < 0) {

也可以创建自己的选择器或使用已有的选择器而不是使用每个选择器：http://james.padolsey.com/javascript/regex-selector-for-jquery/ 但这可能需要在html中进行一些更改

Answer 2

我想到了以下几点：

console.log("1:" + new Date().getTime());
var words = $('.wordlist li');// search take time, check this 20 li in 8ms
console.log("2:" + new Date().getTime());
var filter = $("#filter");
var timer = null;
$("#filter").keyup(function(){
    if (timer != null) {
        clearTimeout(timer);
        timer = null;
    }
    timer = setTimeout(function() {
        var filterStr = filter.val(), count = 0;
        console.log(filterStr);
        if(!filterStr){
           words.each(function(){
               $(this).slideDown('slow');
           });
           return;
        }
        var regex = new RegExp(filter, "i");
        /*below take time too*/
        console.log("3:" + new Date().getTime());
        words.each(function(){
            var ret = $(this).children('.trans').text().search(regex); 
            // children faster than find! or we should store text in array like "words" - words = [{this:this, text: text}], cache those text()
            // some problem here with search, 'A B C' match with 'aaaa'!
            //console.log($(this).children('.trans').text());
            console.log(ret);// 
            if (ret < 0) { 
                $(this).slideUp('slow');
            } else {
                $(this).slideDown('slow');
                count++;
            }
        });
        console.log("4:" + new Date().getTime());
        timer = null;
    }, 500);// do not need search each keyup!

});

但最大的问题是你的10000李！在jsfiddle中，过滤20 li需要20ms！你可以在你的脚本中手动为你的li建立索引（一个大数组而不是每个（），children（）或finde（），但也消耗时间。）

您是否会在服务器中构建索引（java-lucence或任何其他内容）？您可以使用关键字（用于搜索）从服务器获取$ .ajax的数据（json / xml格式）。而且，您可以将数据拆分成页面！每个$ .ajax可以限制为＆＃34; start＆＃34;并结束。服务器端解决方案似乎不仅仅是脚本

幻灯片解决方案的伪代码 HTML：

<div id=“searchResult” class="main container" style="overflow-y: auto;overflow-x: hidden;">
<ul class="list-group wordlist">
 ….
</ul>
</div>

脚本：

 //after keyword changed 
 //query from server, post as a example
 $.post("url", {key:"xxx", skip: skipNum, limit: limitNum}, function(response){
    data = $.toJSON(response); // if your returning data in JSON

    // fade old ul
    $("#searchResult").chidren(".wordlist")
    .animation({"marginLeft": "-xxxpx"}, "fast", "linear", function() {

        //remove old result
        //assume $(this) as $("#searchResult").chidren(".wordlist")
        $(this).remove();
    });

    // assume here after removing old result if above was sync
    // add new ul foreach result in return data
    var newUl = $("<ul>").css({"display", "none", "marging-left": "yyypx"});// hide at first;
    for (var i in data) {
        $("<li>")
         ..... // style , text ,chidren node in li
       .appendTo(newUl);// append to ul
    }
    newUl.appendTo($("#searchResult"));

    //slide the new ul
    newUl.css("display", "block"); //make it display 
    newUl.animation({"marginLeft":"0px"}.....);
}

此外，U可以使用css3进行动画

用jquery过滤ul li

2 个答案: