проблема с запуском jquery

Question

Я использую функцию для выравнивания высоты тегов li, возвращаемых из базы данных. Я также использую jquery для назначения определенных новых классов, зависящих от их позиции в строке.

Basocally Моя проблема в том, что позиционирующая часть инструкции jquery всегда работает, но часть с равными высотами иногда не срабатывает, на самом деле она вообще не работает в пустом кеше - однако она всегда срабатывает при обновлении или в секундах посетите страницу.

Живой пример здесь Link here! (дайте мне знать, если он работает для вас!)

код JQuery Я использую перечислен ниже.

jQuery.fn.equalCols = function(){ 
    //Array Sorter 
    var sortNumber = function(a,b){return b - a;}; 
    var heights = []; 
    //Push each height into an array 
    $(this).each(function(){ 
     heights.push($(this).height()); 
    }); 
    heights.sort(sortNumber); 
    var maxHeight = heights[0]; 
    return this.each(function(){ 
     //Set each column to the max height 
     $(this).css({'height': maxHeight}); 
    }); 
}; 

jQuery(document).ready(function($) { 
     $(".thumbs").each(function(i) { 
     if (i % 4 == 0) 
      $(this).addClass("start"); 
     if (i % 4 == 3) 
      $(this).addClass("end"); 
    }); 
    $(".thumbs").each(function(i) { 
     if (i % 3 == 0) 
      $(this).addClass("start"); 
     if (i % 3 == 2) 
      $(this).addClass("end"); 
      }); 
    $(".event_thumbs").each(function(i) { 
     if (i % 2 == 0) 
      $(this).addClass("start"); 
      }); 
$('.thumbs, .end, .start').equalCols(); 
}); 

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

Answer 1

Возможно, проблема не в том, чтобы обернуть это в jQuery в последнем цикле? Кроме того, вам нужно только следить за максимумом, насколько это возможно. Помещение высот в массив и сортировка кажется неэффективным.

jQuery.fn.equalCols = function(){ 
    var maxHeight = 0; 
    $(this).each(function(){ 
     var height = $(this).height(); 
     if (height && height > maxHeight) maxHeight = height; 
    }); 

    return $(this).each(function(){ 
     //Set each column to the max height 
     $(this).css({'height': maxHeight}); 
    }); 
}; 

Update: Поскольку у вас есть изображения на странице, это не достаточно, чтобы ждать, пока не будет загружен документ, вы должны ждать, пока изображения не будут загружены, а также. Или, еще лучше, просто выравнивайте после загрузки каждого изображения - таким образом, вы обязательно сделаете это после того, как все они будут. Поскольку обработчик нагрузки не будет вызываться, если изображение загружено до его применения (например, оно может находиться в кеше пользователя и загружаться быстрее, чем выполняется javascript), настроить таймер для запуска функции equalCols после указанного количество времени для покрытия случая, когда обработчик нагрузки не вызывается для любого изображения. Оставьте обработчик нагрузки на изображении, затем, если вы измените исходный код на изображение, он будет снова применен, и страница будет снова скорректирована.

$(function() { 
    $('img').load(function() { /* equalize after every image load */ 
      equalize(); 
    }); 
    setTimeout(equalize, 2000); /* wait 2 secs, then equalize */ 
}); 

function equalize() { 
    $('.thumbs, .end, .start').equalCols(); 
} 

Answer 2

Я сделал somehting как это для автомоек высоты, чтобы соответствовать на основе класса ... работает кросс-браузер, хотя это, возможно, потребуется обновить или plunized.

function level_it(elem_class) 
{ 
     var s = 0; 
     var t = 0; 
     $('.'+elem_class).each(function(){ 
     if($(this).height() < s) 
     { 
     s = $(this).height(); 
     } 
     if($(this).height() > t) 
     { 
      t = $(this).height(); 
     } 
    }); 
    $('.'+elem_class).each(function(){ 
    $(this).height(t); 
    }); 
} 
$(document).ready(function(){ 
    level_it('pricing'); 
});