Оптимизация селектора jquery для Chrome

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

Это в основном циклически повторяет все профили в базе данных и создает строку таблицы для каждого профиля, где последние данные таблицы содержат флажок, который можно выбрать для отправки электронной почты.Если пользователь щелкает заголовок таблицы с идентификатором «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

Я действительно не думаю, что это проблема селектора вообще.

Ваш селектор является допустимым селектором для querySelectorAll, что означает, что он будет очень быстрым.

Я тестировалточный селектор в Chrome на Mac против таблицы с 250 строками, и результат был мгновенным.

Я предполагаю, что происходит что-то еще.

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. Затем просто устанавливаемСвойство проверено на true. Полагаю, это так быстро, как только может.)

Answer 3

Попробуйте удалить table tr часть селектора.Это ничего не добавляет.

Answer 4

Добавить 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");

Answer 5

Вы профилировали это?Что занимает слишком много времени, получая элементы или зацикливаясь на них?Единственный способ действительно ускорить код - это профилировать и исправлять медленные части.

FWIW, я бы попробовал

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

...

и увидел бы, что происходит.

Answer 6

Вы можете использовать .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 7

Вы всегда можете задать каждому флажку событие выбора / отмены выбора, которое будет добавлять / удалять класс из флажка, а затем использовать класс в качестве селектора.