Обратный вызов jquery после каждой () итерации

 $.each(mappings, function(key, item) {
        if (match(selected_values, item)) {
          $(key).show("slow");
        } else {
          $(key).hide("slow");
        }
    });

    //At this point, all items are still visible!
    var item_count = $('.item').filter(':visible').length;
    if (item_count < 12) { 
        $('.item').not(':visible').slice(0,12 - item_count).show();
    }

Я повторяю структуру данных, и в зависимости от некоторых выбранных атрибутов некоторые элементы скрыты, а другие показаны.

Проблема в том, что клиент запрашивает минимум видимых элементов. Таким образом, даже если фильтрация работает правильно, и я получаю число из 3 видимых элементов, они должны быть дополнены еще 9 элементами, чтобы всегда отображалось как минимум 12.

Теперь, после каждой итерации, оказывается, что функции .show() и .hide() еще не завершены. Как и где я могу правильно применить функции заполнения?

Я проверил Вызов функции jQuery после завершения .each(), но он применяет функцию после каждого .show() или .hide(), а это не то, что я хочу (недопустимо дополнять во время итерации, сначала нам нужно скрыть все, что не применяется).

Этот: выполнить обратный вызов после jquery каждой итерации не работает, когда вызывается функция, у меня та же проблема (show() и hide() не завершены).

EDIT: я только что узнал, что удаление атрибута "slow" в методах .show() и .hide() решает проблему. А что, если я хочу сохранить анимацию?


javascript jquery each visible
person transient_loop    schedule 03.12.2013    source источник
comment
Да, я только что узнал и отредактировал свой вопрос. Это анимации. Спасибо   -  person transient_loop    schedule 03.12.2013

Ответы (2)


arrow_upward
0
arrow_downward

Это синхронно, поэтому вам не нужен обратный вызов, но у вас есть асинхронная анимация, и это реальная проблема. Просто используйте счетчик в цикле вместо проверки длины элементов или добавьте класс:

$.each(mappings, function(key, item) {
    if (match(selected_values, item)) {
      $(key).addClass('selected').show("slow");
    } else {
      $(key).hide("slow");
    }
});

if ($('.item.selected').length < 12) { 
    $('.item').not('.selected').slice(0,12 - item_count).show();
}
person adeneo    schedule 03.12.2013
comment
Мне нравится добавление решения класса. должно быть быстрее, чем фильтрация для видимых (?). Конечно, мне также пришлось добавить соответствующий removeClass, прежде чем фильтрация начнется снова. - person transient_loop; 03.12.2013

arrow_upward
0
arrow_downward

Вы можете получить хорошие результаты, просто добавив в цепочку .stop():

$('.item').not(':visible').slice(0,12 - item_count).stop().show();

Любая ранее начатая анимация (показать/скрыть) будет остановлена, и элемент будет просто показан.

person maackle    schedule 03.12.2013