Optimizing jquery selector for Chrome

I have the following jquery code to loop over 525 (I know, alot!) checkboxes:

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

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

UPDATE The html looks like this:

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

This basically loops over all profiles in the database and creates a table row for each profile, where the last table data includes a checkbox, which one can select to send email to. If the user clicks the table header with the id of "email_check" then the javascript code should kick in, and that's where Chrome fails.

I attach the event with the following code:

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

When I run this code in Firefox (mac), it goes smoothly but when I run it in Chrome (mac) it takes forever and ends up giving me the window where chrome offers me the option of killing the window, so basically it never completes this loop.

I've been trying to optimize this selector as much as I can, and since jquery 1.3, I understand that they switched from left to right to right to left selector, which basically means that I should try to make my right most selector as specific as I can. Can it be any more specific than I currently have?

Or is it the loop that just takes so long? I have tried switching from $.each to just a regular for() without a positive result.

Any tips or ideas how I can fix this?

Ingiber

---

I really don't think this is a selector issue at all.

Your selector is a valid selector for querySelectorAll, which means it will be extremely fast.

I tested the exact selector in Chrome on Mac against a table with 250 rows, and the result was instantaneous.

I'd guess that there's something else going on.

---

Try removing the table tr part of the selector. It isn't adding anything.

---

Try this:

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

(So, first we select all check-boxes that are of the class "email-checkout" and are inside the #profile-list element. Then we just set their checked property to true. I assume, this is as fast as it can be.)

---

You could always give each check box a select/deselect event that will add/remove a class from the checkbox, then use the class as the selector.

---

You can use a .each() on the set to use the elements directly, like this:

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

Also note the removal of :not(:checked) above...if you're going to check them all, that selector is more expensive that actually checking them anyway. More importantly is that this.checked = true; is tremendously cheaper than $(elements[i]).attr('checked', 'checked'); which happens every time.

---

Did you profile this? What is taking too long, getting the elements or looping over them? The only way to really speed up code is to profile and fix the slow parts.

FWIW, I would try

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

...

and see what happens.

---

Add an onlclick on the checkbox

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