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

更新 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; 是極其比便宜的$(elements[i]).attr('checked', 'checked'); 每次都會發生。

Answer 6

你有沒有介紹？ 花費太長時間，獲取元素或遍歷它們是什么？ 真正加快代碼速度的唯一方法是剖析並修復較慢的部分。

FWIW，我會嘗試

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

...

看看會發生什么。

Answer 7

添加一個單擊該復選框

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