2013-07-31 7 views
1

Я использую jQuery UI Sortable для сортировки тизеры. Проблема в том, что иногда тизеры включают в себя разные количества текста. (Красный текст.) Так что, если есть более чем одна линия тизеров это происходит: Но то, что я хочу это: тизеры должны иметь такую ​​же высоту, как и самый высокий тизера в строке. Невозможно дать им одинаковый рост. Максимальное количество тизер на линию всегда равно 3.jQuery UI Сортируемые элементы в одной строке должны иметь одинаковую высоту

Есть ли более простой способ, чем измерение высоты самого высокого тизера на линию и настройка высоты других тизеров с помощью jQuery после каждого сортировки?

ответ

0

на основе DevIshOnes ответить на это мое решение:

var heights = []; 
var tallest = []; 
$('.teaser:not(.ui-sortable-placeholder)').each(function() { 
    $(this).height('auto'); 
    heights.push($(this).height()); 
}); 
while (heights.length != 0) { 
    var line = heights.splice(0,3); 
    line.sort(function(a,b){return b-a}); 
    tallest.push(line[0]); 
} 
$('.teaser').each(function (i) { 
    $(this).height(tallest[Math.floor(i/3)]); 
}); 

Чтобы получить самый высокий тизер в каждой строке я генерировать tallest массив, а затем я использую tallest[Math.floor(i/3)], чтобы получить правильное значение высоты для каждого тизера.

1
$(function() { 
    $('li').addClass('teaser'); 
    $('.sortable').sortable(); 
    $('#fixHeights').click(function() { 
     var heights = []; 
     $('.teaser').each(function() { 
      heights.push($(this).height()); 
     }); 
     heights.sort(); 
     var tallest = heights.pop(); 
     alert(tallest); // optional 
     $('.teaser').each(function() { 
      $(this).height(tallest); 
     }) 
    }); 
}); 

jsFiddle demo!

Есть более простой способ, чем измерение высоты самого высокого тизер на линию и регулировать высоту других тизеров с JQuery после каждого рода?

Проще говоря, нет.

Смежные вопросы