使用jQuery按值选择选项的性能更好吗？

Question

我正在尝试使用几天来开发的JavaScript解决一些性能问题。 这些功能之一如下：

var removeAddress = function(pk) {
    var startTime = new Date();
    jQuery('.add_driver select.primary_address:has(option[value=' + pk + ']:selected)').each(function(c, o) {
        console.log("Shouldn't get here yet...");
        showInputs(o);
    });
    console.log('removeAddress1:  ', (new Date() - startTime) / 1000);
    jQuery('.add_driver select.primary_address option[value=' + pk + ']').remove();
    console.log('removeAddress2:  ', (new Date() - startTime) / 1000);
};

这段代码在Firefox中非常刺激：

removeAddress1:  0.004
removeAddress2: 0.023

但是在IE8中，这是另一个故事：

LOG: removeAddress1: 0.203
LOG: removeAddress2: 0.547

有问题的表单是一个20人的表单，其中有名字，姓氏和5个地址字段。 我还添加了一个下拉列表，用于选择其他形式（ .primary_address ）已存在的地址。 该代码正在从主地址选择框中删除一个地址。

我试图确定为什么要花这么长时间，而唯一引人注意的是option[value=????]部分。 这是查找有问题的元素的最实用方法，因此我同意了。 关于这两个选择器，是否导致IE失去午餐？

Answer 1

选项元素始终是气质。 也许只获取所有SELECT元素然后简单地查询它们的值会更简单。 选定的OPTION始终还将其value属性也赋予SELECT。 所以：

jQuery('.add_driver select.primary_address').filter(function() {
  return $(this).value === pk;
});

jQuery('.add_driver select.primary_address[value='+pk+']');

也许其中一种会更快-不确定第二种是否会工作。

Answer 2

您可以通过分解超级选择器字符串来大大加快这一步。

首先，以id或更好的缓存元素开始。 然后使用.children()获取select元素。 不要使用:has选择器，而要使用.has() 。 方法通常比复杂的选择器语法快，因为jQ不必分割字符串即可弄清楚您的意思。 然后，正如拉斐尔所说，您可以跳过:selected而只需查看匹配的select的值。

formElem = document.getElementById('formId');
jQuery('.add_driver', formElem)
    .children('select.primary_address')
        .has('[value=' + pk + ']')
        .each(...);

将formElem作为第二个参数传递formElem ，将其用作搜索的上下文，因此jQ不必从根开始。

要.remove() ，元素可以从上方缓存jQuery对象，也可以在.each()之后将其.each()因此您不必再次选择所有内容。

Answer 3

也许在removeAddress函数之外预先计算$（'formId .add_driver select'），然后重用该代码，这样removeAddress（）不必枚举太多元素。