IE 中 jQuery 最接近的行为非常慢答案

【问题标题】：jQuery closest behaviour in IE very slowIE 中 jQuery 最接近的行为非常慢
【发布时间】：2011-11-28 15:40:49
【问题描述】：

我有一个有 5000 行的表。在每一行中，我都有一个 html 元素。 myElementList 是这些元素的列表。现在我需要选择这些元素的所有 tr。我正在使用以下代码。

myElementList.closest('tr');

这在 FF 中非常有用。但是当我在 IE 8 中运行相同的程序时。浏览器挂起并出现一个弹出消息，提示停止脚本。

任何我看到这种行为的建议都是任何选择。

编辑：

当我使用 parents() 时行为保持不变

 myElementList.parents('tr');

【问题讨论】：

也许是因为 IE 很慢？尝试优化您的代码。使用选择器更具体。
@Blender 你能给我一个优化的吗？
一个更优化的版本是不要一次抓取每个 TR 元素。你能为这个问题提供一些背景吗？一次选择所有内容的目的是什么？您想要达到什么目的？
我需要有关表格外观 (HTML) 的更多信息。您的方法使用蛮力找到最接近的tr，但更聪明的方法是利用模式。 tr always 会是第四级吗？它有类/ID吗？等等。
@AlecAnanian，实际上我在每一行都有 checkbos 元素。我需要找到每个 tr 选定的 checkbos。所以我选择了checkbos列表。但我还需要每个选定 checkbos 的 tr。

标签： jquery performance internet-explorer

【解决方案1】：

要获得您想要的相当快速的内容（与每个选中的复选框最近的父 tr），您可以执行以下操作：

$.fn.extend({
    closestByTagName: function(tagname) {
        var tag = tagname.toUpperCase(), i = this.length, node, found=[], trParents;
        while(i--) {
          node = this[i];
          while((node=node.parentNode) && node.nodeName != tag);
            if(node) {
              found[found.length] = node;
            }
        }
        return $(found);
    }

});

var result = $('input:checked').closestByTagName('tr');

它不漂亮，但我想不出更快的方法。（它应该大大击败 jQuery）

【讨论】：

您的代码在节点 && found[found.length] 处抛出错误。如果我删除节点 &&，那么萤火虫控制台显示未定义而不是 tr 元素
我已经用一个固定版本更新了我的答案，我也方便地将其包装为一个 jQuery 扩展。你可以在这里看到它的使用：jsfiddle.net/SWrfm/14
还添加了一个带有 5000 行的小提琴版本，所有选中的复选框 - 该功能在 ie7 中非常快 :) - 请耐心等待要构建的表格：P jsfiddle.net/SWrfm/16
谢谢。我刚刚记录了你的插件的结果。然后找到这个，console.log(checkBoxList.length)=5000 和console.log(checkBoxList.closestByTagName('tr').length)=0。看来插件不正确。示例 Html， Person5000 a5000@a .com 街道，5000
啊，你在 firefox 中测试，这不明白 parentElement。更新的示例改为使用 parentNode，现在应该可以在所有浏览器中使用。请在此处查看更新的示例：jsfiddle.net/SWrfm/20

【解决方案2】：

尝试使用 parent()、child()、next()、prev() 选择器。我不是 100% 知道 jQuery 如何准确地遍历表以找到 tr，但 5,000 行是很多遍历。更具体将使 js 引擎做更少的工作。

http://api.jquery.com/category/traversing/

$('input:checked').parent('tr').each(function(i){....

【讨论】：

我认为他们都只选择了一个元素。我的意思是，如果列表中有 100 个元素，那么它们只返回一个父级。我需要所有的父母。
parent('tr') 从已知位置开始，向后遍历一步，直到找到 'tr'，这可能是 2 步...最接近（'tr'）可能遍历所有 100 个元素...对于您描述的每个复选框，这可能是 1 到 100 次遍历。
这行不通。 parent() 只会选择第一个父元素。而 parents() 将选择直到 DOM 树的所有元素。但是父母也表现出与最接近（）一样的行为。
@tank: .closest 与.parents 一样工作，除了两件事：1：它在找到它正在寻找的东西时停止（因此通常比.parents 快）2：它开始对元素本身进行.is 检查以确保它不是它正在寻找的东西，这使得它在极少数情况下比.parents 慢。