Question

我正在尝试创建一个列表过滤器，它在小列表上工作正常，但是大列表上出现问题，它变得非常慢。如果单击重置按钮或删除某些字符，则新列表显示速度很慢。这样做可能会有一些问题请帮帮我。以下是我的代码： HTML：

<div class="filter-wrap">
  <span class="clearable">
    <input class="data_field" name="data_field" id="brands-search" placeholder="Search Brands Here" type="text"/>
    <span class="icon_clear" style="cursor:pointer;">✘</span>
  </span>
  <div class="small-bt"><p class="common all">select all &nbsp|</p><p class="common none">&nbspunselect all</p></div>
  <div class="check-wrap" id="brands">
    <div class="check-unit">
      <input type="checkbox" class="check" />
      <p class="slide-head brandList">Samsung</p>
  </div>
  </div>
</div>

JQuery的：

$('.check-unit:nth-child(even)').css({'float':'right'});
function listFilter(list){
        $('.data_field').change( function () {
            var filter = $(this).val();
            if(filter) {
                $(list).children("p:not(:Contains(" + filter + "))").parent().slideUp();
                $(list).children("p:Contains(" + filter + ")").parent().slideDown();
                //console.log($(".a:nth-child(1)").text());
              } else {
                $(list).children("p").parent().slideDown().removeClass("a");
              }
          })
        .keyup( function () {
            $(this).change();
        });
}

此处check-unit重复。有关详细信息，请参阅此jsfiddle http://jsfiddle.net/iiison/BdRpk/

还有一件事：为了使布局正确，我使用了$('.check-unit:nth-child(even)').css({'float':'right'});（第一行的javascript）。如果你在输入框中输入内容，布局会受到干扰，请告诉我这个问题的解决方案。

Answer 1

我认为由于您使用的是slideUp()/slideDown()，因此大量数据的性能正在下降。为什么不使用hide()呢？

下面是一个代码，它根据div中的联系人列表生成过滤器/搜索功能。联系人作为子div输入到另一个div

function searchContacts(entered_text){
    entered_text = entered_text.toUpperCase();//convert the filter value to uppercase to make it non case sensitive
    $("#external-events").children().show(); //Refresh the div containing the contact list. Id of the parent div is "external-events"
    var contactDivs = $("#external-events").children();
    for (var iter=0;iter<contactDivs.length ; iter++)
    {
        contactDivs[iter].firstChild.value = contactDivs[iter].firstChild.value.toUpperCase();
        if(contactDivs[iter].firstChild.value.indexOf(entered_text)== -1) {             // Does not contain
            $(contactDivs[iter]).hide();
        }
    }
}

这隐藏了符合标准的其他元素，从而过滤掉了实际符合标准的元素。

Answer 2

尝试提高代码的性能，不要在纯JS中使用jQuery，在类选择器之前，尝试应用元素，这将提高性能：

$('div.check-unit:even').css({'float':'right'});

// Why are you define evt handler in a function, and how many times do you call this function ? This could conduct to a huge memory use.

function listFilter(list){
    $('.data_field').keyup( function () {
        var filter = this.value;
        if(filter) {

            //Unoptimized code... Can you provide a fiddle to speed up the debug ?

            $(list).children("p:not(:Contains(" + filter + "))").parent().slideUp();
            $(list).children("p:Contains(" + filter + ")").parent().slideDown();
            //console.log($(".a:nth-child(1)").text());
          } else {
            $(list).children("p").parent().slideDown().removeClass("a");
          }

           //END of Unoptimized code...
      });

}

JQuery表过滤器工作得太慢了

2 个答案: