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

更新 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（）而没有正面结果。

我可以解决这个问题的任何提示或想法吗？

Ingiber

Answer 1

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

Answer 2

试试这个：

// 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 3

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

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

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

我猜想还有其他事情发生了。

Answer 4

您总是可以给每个复选框一个select / deselect事件，该事件将从复选框中添加/删除一个类，然后使用该类作为选择器。

Answer 5

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

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

还要注意删除上面的:not(:checked) ...如果你要全部检查它们，那么选择器实际上检查它们会更加昂贵。更重要的是，this.checked = true; 比<{1>}

Answer 6

你知道这个吗？什么花了太长时间，获取元素或循环它们？真正加速代码的唯一方法是分析和修复缓慢的部分。

FWIW，我会尝试


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

...

看看会发生什么。

Answer 7

在复选框上添加一个onclick

$("#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");

优化Chrome的jquery选择器

7 个答案: