Question

我必须迭代一组具有<ul>的{{1}}并根据输入的单词对其进行过滤。基于id的第一个代码运行良好。但问题是我们有重复的ID，这打破了过滤器。所以，我为课程分配了ID并进行了课程选择，现在它工作得很好，但有一些问题。主要问题是类选择过滤器比Id选择过滤器慢。因为它是一个很大的列表，所以在使用类名迭代时我会感觉很慢。有什么方法可以让它更快吗？我也想知道为什么课程选择比较慢！

这是我的代码迭代基于id：

<li>

这是基于类的迭代：

  $.each(propertiesList, function () {
    var item = $("#" + this.id).parent();
    if(this.property.toLowerCase().indexOf(value.toLowerCase()) === -1) {
      item.addClass('no-match');
    }
    else {
      item.parents('.root-property-category').show().addClass('expanded').children('ul').show();
      item.removeClass('no-match');
    }
  });

Answer 1

使用class selector代替attribute contains selector，您可以大幅提升效果

var item = $("#available-properties ." + this.id).parent();

Answer 2

试试这个：

var item = $("#available-properties").find("." + this.id).parent();

转换为人类它将是：查找具有id available-properties的元素，然后查找具有类this.id的子项，然后找到子项父项。

，而

$("#available-properties [class*='" + this.id + "']")

说：使用属性类this.id查找elemens，找到那些具有id available-properties的元素的子元素。效率低得多。

Answer 3

问题在于你是如何按班级查找的。您正在使用：[class*='" + this.id + "']"，它将查找属性class等于this.id的所有元素。我认为使用'.' + this.id会更快，因为这是按类查找元素的正确方法。这应该比按属性查找元素快得多。

var item = $("#available-properties ." + this.id).parent();

顺便说一句，如果您正在寻找速度提升，请将each函数替换为for循环。这往往要快得多。

Answer 4

嗨所有感谢您的帮助..

最后我通过以下方式解决了这个问题，希望这对某些人有所帮助..

  $.each(propertiesList, function () {
    var item = $('[id="'+ this.id+'"]').parent();
    if(this.property.toLowerCase().indexOf(value.toLowerCase()) === -1) {
              item.addClass('no-match');
    }
    else {
            item.parents('.root-property-category').show().addClass('expanded').children('ul').show();
             item.removeClass('no-match');
    }
  });

这个$('[id="'+ this.id+'"]')选择所有具有id的元素，并且它正在快速运行..

类选择的jQuery迭代比id选择慢

4 个答案: