优化 Chrome 的 jquery 选择器

Question

我有以下 jquery 代码来循环 525 个（我知道，很多！）复选框：

var elements = $("#profile-list table tr input[type=checkbox].email-checkout:not(:checked)");

$.each(elements, function(i) {
    $(elements[i]).attr('checked', 'checked');
});

UPDATE html 看起来像这样：

<table>
    <tr>
        <th>Name</th>
        <th>Title</th>
        <th>E-mail</th>
        <th>Telephone</th>
        <th id="email_check"><img src="check_black.png"/></th>
   </tr>
   <?php foreach ($this->profiles as $profile): ?>
        <tr>
            <?php echo $this->presentProfile($profile, 'list') ?>
        </tr>
   <?php endforeach; ?>

这基本上会循环数据库中的所有配置文件，并为每个配置文件创建一个表行，其中最后一个表数据包含一个复选框，可以选择将电子邮件发送到该复选框。如果用户点击 id 为“email_check”的表头，那么 javascript 代码就会启动，这就是 Chrome 失败的地方。

我使用以下代码附加该事件：

$("#email_check img").live('click', function() {
     //my code
}

当我在 Firefox (mac) 中运行此代码时，它会顺利进行，但是当我在 Chrome (mac) 中运行它时，它会花费很长时间，最终给我一个窗口，其中 chrome 为我提供了以下选项：杀死窗口，所以基本上它永远不会完成这个循环。

我一直在尝试尽可能地优化这个选择器，从 jquery 1.3 开始，我知道它们从左到右切换到从右到左选择器，这基本上意味着我应该尝试使最右边的选择器变得具体尽我所能。它可以比我目前的更具体吗？

或者只是需要这么长时间的循环？我尝试从 $.each 切换到常规的 for() ，但没有得到积极的结果。

有什么建议或想法可以解决这个问题吗？

英吉贝尔

Answer 1

我真的认为这根本不是选择器问题。

您的选择器是 querySelectorAll 的有效选择器，这意味着它将非常快。

我在 Mac 上的 Chrome 中针对 250 行的表格测试了精确选择器，结果是即时的。

我猜还有其他事情发生。

Answer 2

尝试删除选择器的 table tr 部分。它没有添加任何东西。

Answer 3

试试这个：（

// console.time("test");

var elements = $("#profile-list input[type=checkbox].email-checkout").get();
var len = elements.length;

for (var i = 0; i < len; i += 1) {
    elements[i].checked = true;
}

// console.timeEnd("test");

所以，首先我们选择所有属于“email-checkout”类并且位于#profile-list元素内的复选框。然后我们只需将它们的checked属性设置为true。我想，这和因为它可以是这样。）

Answer 4

您始终可以为每个复选框提供一个选择/取消选择事件，该事件将从复选框添加/删除类，然后使用该类作为选择器。

Answer 5

您可以在集合上使用 .each() 来使用元素直接，如下所示：

$("#profile-list table tr input[type=checkbox].email-checkout").each(function() {
  this.checked = true;
});

另请注意上面删除 :not(:checked) ...如果您要检查所有这些，那么该选择器比实际检查它们更昂贵。更重要的是 this.checked = true; 比 $(elements[i]).attr('checked', 'checked'); 便宜非常每次都会发生。

Answer 6

您对此进行了简介吗？获取元素或循环遍历元素花费的时间太长？真正加速代码的唯一方法是分析和修复缓慢的部分。

FWIW，我会尝试

var elements = $("#profile-list").find("input[type=checkbox].email-checkout").get();

...

看看会发生什么。

Answer 7

添加 onlclick 复选框

$("#profile-list input[type=checkbox].email-checkout").click(function() {
    var obj = $(this);
    obj.hasClass("checked") ? obj.removeClass("checked") : obj.addClass("checked");
});

s = $("input[type=checkbox].email-checkout.checked");