Выравнивание высоты с Jquery после события - PullRequest
Новая
       35

Выравнивание высоты с Jquery после события

3 голосов
/ 26 января 2011

Я занимаюсь разработкой сайта, который анализирует RSS-каналы и отображает их в виде серии div. После загрузки всех каналов мне бы хотелось запустить функцию jquery, которая в основном берет высоту самого высокого div и устанавливает все div, равные этой высоте. Вы можете посмотреть сайт здесь: http://vitaminjdesign.com/adrian/

В настоящее время я использую плагин jquery равных высот , описанный ниже: 

function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

и вы можете позвонить по этому номеру: 

$(document).ready(function() {
$(".block").equalHeights(); 
});

Это не работает должным образом (устанавливает высоту всех элементов div, равную высоте самого высокого элемента div ДО rss-загрузок), скорее всего из-за того, что мне нужно использовать живой обработчик событий? Кто-нибудь знает, как я могу установить высоту равными после того, как все будет полностью загружено?

1 Ответ

4 голосов
/ 26 января 2011

Вам нужно позвонить equalHeight, когда завершится AJAX. У вас есть два варианта: (a) выполнить вызов после загрузки каждого элемента или (b) выполнить вызов один раз после загрузки всех элементов. equalHeight не выглядит ресурсоемким, так что вы можете также делать вызов каждый раз.

Так что просто добавьте equalHeight($(".block")); к обратному вызову success каждого вызова AJAX. 

$.ajax({
    url: 'someurl.rss',
    success: function(){
        // your code to insert the relevant content

        equalHeight($(".block")); // insert this at the end of each call to the RSS files
    }
});

Альтернативно, и немного более интенсивно, но проще с точки зрения кода, использовать ajaxSuccess для запуска функции после каждого вызова AJAX: 

$(document).ajaxSuccess(function(){
    equalHeight($(".block"));
});
...