優化jQuery選擇爲Chrome

我有以下的jQuery代碼遍歷525（我知道，很多！）複選框：優化jQuery選擇爲Chrome

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; ?>

這基本上循環遍歷數據庫中的所有配置文件，併爲每個配置文件創建一個錶行，其中最後一個表數據包含複選框，其中on e可以選擇發送電子郵件給。如果用戶點擊ID爲「email_check」的表格標題，那麼JavaScript代碼應該會引入，這就是Chrome失敗的原因。

我附上事件用下面的代碼：

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

當我在Firefox（MAC），它的順利運行這段代碼，但是當我在瀏覽器（MAC）運行它永遠結束了給我的窗口鉻給我提供了殺死窗口的選項，所以基本上它永遠不會完成這個循環。

我一直在儘可能地優化這個選擇器，並且自從jquery 1.3，我明白他們從左到右切換到右側到左側選擇器，這基本上意味着我應該嘗試使我的權利大多數選擇器都儘可能具體。它可以比我目前有更具體的嗎？

或者它只是需要這麼長的循環？我嘗試從$ .each切換到（）的正則表達式，但沒有獲得正面結果。

任何提示或想法如何解決這個問題？

Ingiber

來源

2010-11-05 Indyber

是一個穩定的Chrome版本，或開發一個？這也可能會有所作爲 – 2010-11-05 13:19:43

我在mac上使用7.0.517.44版本，我認爲它是穩定版本 – Indyber 2010-11-05 13:28:29

也可以在Safari中嘗試。 Safari和Chrome共享相同的引擎.... – 2010-11-05 13:32:48

我真的不認爲這是一個選擇器問題。

您的選擇器是querySelectorAll的有效選擇器，這意味着它將非常快速。

我測試了Mac上Chrome瀏覽器的確切選擇器與250行的表格，結果是即時的。

我猜想還有其他事情正在發生。

來源

2010-11-05 13:56:33 user113716

有趣的是，我最好再看看我的代碼。 – Indyber 2010-11-05 14:04:54

@Indyber - 奇怪的是，這個問題對Chrome來說是獨一無二的。它的JavaScript引擎非常快速。如果你可以發佈更多的代碼，這將是有益的。 – user113716 2010-11-05 14:07:56

我用更多的代碼示例更新了這個問題 – Indyber 2010-11-05 14:23:22

你總是可以給每個複選框選擇/取消事件，將添加/解除複選框中的一類，然後使用類作爲選擇。

來源

2010-11-05 13:08:37 Samuel

嘗試刪除選擇器的table tr部分。它沒有添加任何東西。

來源

2010-11-05 13:09:22

刪除它並沒有幫助。 – Indyber 2010-11-05 13:32:20

試試這個：

// 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");

（所以，首先我們選擇所有入住的箱子，是類「電子郵件結賬」的，並且是＃型材-list元素裏面然後我們只需設置自己的檢查。屬性爲true我認爲，這是因爲快，因爲它可以）

來源

2010-11-05 13:14:22

我喜歡你的想法，但它給出了相同的結果。 – Indyber 2010-11-05 13:29:13

@Indyber我很想知道我的代碼與原始代碼相比的性能提升。您可以使用console.time（）和console.timeEnd（）來測量它，如下所示：'console.time（「test」）;/*代碼*/console.timeEnd（「test」）;'然後，檢查控制檯以查看結果... – 2010-11-05 13:35:53

非常有趣。我在Firefox上做了測試，我的解決方案需要28ms，而你的解決方案只需要14ms，很好！但Chrome仍然存在一些問題。 – Indyber 2010-11-05 13:45:39

您可以設定使用.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');發生每時間。

來源

2010-11-05 13:50:51

這在Chrome中仍然失敗，但它在Firefox中只用了18毫秒，所以絕對是對我自己的解決方案的改進 – Indyber 2010-11-05 14:03:15

@Indyber - 你有鏈接到你的頁面嗎？ – 2010-11-05 14:03:47

這是在一個內部的服務器從外部阻止，所以這是不可能的。抱歉。 – Indyber 2010-11-05 14:07:56

你是否介紹了此？什麼花費太長時間，獲取元素或循環播放它們？真正加速代碼的唯一方法是分析和修復慢速部分。

FWIW，我會嘗試


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

...

，看看會發生什麼。

來源

2010-11-05 13:55:12 mpdonadio

添加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");

來源

2010-11-05 14:00:23

優化jQuery選擇爲Chrome

回答

相關問題