jQuery Iteration by class selection 比 id selection 慢答案

【问题标题】：jQuery Iteration by class selection is slower than id selectionjQuery Iteration by class selection 比 id selection 慢
【发布时间】：2013-06-07 11:50:53
【问题描述】：

我必须迭代一组具有<li>s 的<ul> 并根据输入的单词对其进行过滤。基于 id 的第一个代码运行良好。但问题是我们有重复的 ID，这破坏了过滤器。因此，我为班级分配了 ID 并进行了班级选择，现在它运行良好但有一些问题。主要问题是类选择过滤器比 Id 选择过滤器慢。因为它是一个很大的列表，所以在迭代类名时我会遇到缓慢的问题。有什么办法可以让它更快吗？我也想知道为什么选课慢！

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

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

这是基于类的迭代：

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

【问题讨论】：

我认为类选择总是比ID选择慢。如果您尝试按标签选择，然后对结果运行按类选择，您可能会得到更好的结果。
谢谢@StMotorSpark 我会努力的..
“但问题是我们有重复的 ID……”无论如何你都应该解决这个问题。它是无效的 HTML，会永远给您带来问题。
谢谢@AndrewMarshall，是的，我同意.. 这是一个巨大的列表，如果我更改课程，它可以工作，但是过程太慢并且浏览器接缝被绞死......正如你所说我可能必须使用网络服务更改过滤。

标签： jquery performance selector

【解决方案1】：

使用class selector 代替attribute contains selector 可以大大提高性能

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

【讨论】：

$("#available-properties ." + this.id)（点是必需的）
@mishik 添加了一个错字' 而不是.
这是我的猜测，但它不允许我建议单符号编辑。
这不起作用..它挂了浏览器本身...请提供任何其他解决方案...
您好，我已经解决了这个问题并回答了我自己的问题。谢谢您的帮助..

【解决方案2】：

试试这个：

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

翻译成人类会是：找到id为available-properties的元素，然后找到class为this.id的children，然后找到childs的parent。

同时

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

说：找到具有属性类 this.id 的元素，找到其中的女巫是具有 id 可用属性的元素的子元素。效率低得多。

【讨论】：

您好，我已经解决了这个问题并回答了我自己的问题.. 感谢您的帮助..

【解决方案3】：

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

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

顺便说一句，如果您希望提高速度，请将您的 each 函数替换为 for 循环。这往往要快得多。

【讨论】：

您好，我已经解决了这个问题并回答了我自己的问题.. 感谢您的帮助..

【解决方案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 的元素并且它工作得很快..

【讨论】：