jQuery равные столбцы меняются по строкам

Question

Я использую эту функцию jQuery, чтобы сделать <li> равными высотами.

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

Моя проблема в том, что они занимают высоту самого высокого.

Мои <li> s отображаются в строках 3 (3rowsx3columns). Поэтому, если в одной строке есть <li> s с небольшой высотой, они получают высоту высочайшего элемента, и это пустая трата пространства.

Есть ли способ сделать проверку подлинности самого высокого <li> в каждой строке?

Заранее спасибо.

Answer 1

После долгих попыток мне удалось написать сценарий, который находит самый высокий элемент в каждой строке и применяет его к другим элементам строки

function applyEqualHeights(group,itemsPerRow) { 
var tallest = 0; 
var rows = Math.ceil(group.length/itemsPerRow); 
for(var i = 1;i<rows+1;i++) { 
    if(i==1) { 
     tallest = 0; 
     var rowItems = group.filter(":lt("+i*itemsPerRow+")"); 
    } else { 
     tallest = 0; 
     var rowItems = group.filter(":lt("+i*itemsPerRow+")").filter(":gt("+((i*itemsPerRow)-(itemsPerRow+1))+")"); 
    } 
    rowItems.each(function() { 
     var thisHeight = $(this).height(); 
     if(thisHeight > tallest) { 
      tallest = thisHeight; 
     } 
    }); 
    rowItems.height(tallest); 
} 

}

Answer 2

Звучит так, как будто вы можете пойти на прагматичный подход и использовать <table> для вашего макета. Это может быть не семантически корректно, но использование javascript для решения ограничений в CSS не намного лучше.