按順序迭代以匹配高度不同的列表項目

Question

我正在尋求標準化3列表的行。

我想弄清楚的是如何逐行迭代以使高度相等，因爲它們出現在前端。
項目數量將始終相等，並希望每個li的高度基於每次迭代中的最大值相等。

因此，例如：

<div class="column-1-here"> 
    <ul> 
    <li>Test<br />Test<br/>Test<li> 
    <li>test></li> 
    </ul> 
</div> 
/*These lists are aligned side by side and I'd like to make sure the heights are equal. It's also possible I'd add another 1 or 2 lists.*/ 
<div class="column-2-here"> 
    <ul> 
    <li>Test</li> 
    <li>Test<br />Test</li> 
    </ul> 
</div> 

關於如何做到這一點解決，如果我期待在近一個比較的方式運行.each()任何基地的想法？

這是我到目前爲止。目前的問題是高度不能調整到最大高度。同樣，這些都是爲了 - 所以在列1 - 這裏的第一里應該是相同的高度第一李時珍在列2瀏覽：

var listItems = $("#firstTab li"); 
var max_height = 0; 
listItems.each(function() { 
    if($(this).height() > max_height) 
    max_height = $(this).height(); 
    // and the rest of your code 
    listItems.css("height", max_height+'px'); 
}); 

Answer 1

編輯

好了...要逐行設置高度，它會變得更復雜一些。
但沒有什麼是不可能的！

var lists = $(document).find("ul"); 
 
var cells = $(document).find("li"); 
 
var colCount = lists.length; 
 
var rowCount = lists.first().find("li").length; 
 

 
var heights={}; 
 

 

 
// Get the tallest height per row 
 
for(i=0;i<rowCount;i++){ 
 
    heights["row_"+i] = 0; 
 

 
    for(j=0;j<colCount;j++){ 
 
    if(heights["row_"+i] < lists.eq(j).find("li").eq(i).height()){ 
 
     heights["row_"+i] = lists.eq(j).find("li").eq(i).height(); 
 
    } 
 
    } 
 
} 
 

 
// Apply new height to each cell of a row 
 
for(i=0;i<cells.length;i++){ 
 
    cells.eq(i).height(heights["row_"+i%rowCount]) 
 
}

div{ 
 
    float:left; 
 
} 
 
li{ 
 
    border:1px solid black; 
 
    padding:6px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="column-1-here"> 
 
    <ul> 
 
    <li> 
 
     Test<br> 
 
     Test<br> 
 
     Test 
 
    </li> 
 
    <li>Test</li> 
 
    </ul> 
 
</div> 
 
<!--These lists are aligned side by side and I'd like to make sure the heights are equal. It's also possible I'd add another 1 or 2 lists.--> 
 
<div class="column-2-here"> 
 
    <ul> 
 
    <li>Test</li> 
 
    <li> 
 
     Test<br> 
 
     Test 
 
    </li> 
 
    </ul> 
 
</div>

---

先回答

首先，在你的HTML中的幾個小的語法問題...
而 #firstTab不存在。

但我想清楚你想要什麼。
你很近。

您只需要移動此行：listItems.css("height", max_height+'px');
列出了.each()循環。

var listItems = $("[class^=column] li"); 
 
var max_height = 0; 
 
listItems.each(function() { 
 
    if($(this).height() > max_height) 
 
    max_height = $(this).height(); 
 
    // and the rest of your code 
 
    
 
}); 
 
listItems.css("height", max_height+'px');

div{ 
 
    float:left; 
 
} 
 
li{ 
 
    border:1px solid black; 
 
    padding:6px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="column-1-here"> 
 
    <ul> 
 
    <li> 
 
     Test<br> 
 
     Test<br> 
 
     Test 
 
    </li> 
 
    <li>Test</li> 
 
    </ul> 
 
</div> 
 
<!--These lists are aligned side by side and I'd like to make sure the heights are equal. It's also possible I'd add another 1 or 2 lists.--> 
 
<div class="column-2-here"> 
 
    <ul> 
 
    <li>Test</li> 
 
    <li> 
 
     Test<br> 
 
     Test 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

你不必用ID firstTab任何元素在你的HTML代碼。我加了它並且工作正常。順便說一下，我建議將設置高度部分保留在循環之外。如果您想要將此調整應用於多個列表，您可以使用class選擇器代替id選擇器。像.adjustedTab

var listItems = $("#firstTab li"); 
 
var max_height = 0; 
 
$.each(listItems, function(key, val) { 
 
    if($(this).height() > max_height) { 
 
     max_height = $(this).height(); 
 
    } 
 
}); 
 
listItems.css("height", max_height+'px'); 
 
console.log(max_height);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="column-1-here"> 
 
    <ul> 
 
    <li>Test<br />Test<br/>Test<li> 
 
    <li>test></li> 
 
    </ul> 
 
</div> 
 
/*These lists are aligned side by side and I'd like to make sure the heights are equal. It's also possible I'd add another 1 or 2 lists.*/ 
 
<div class="column-2-here" id="firstTab"> 
 
    <ul> 
 
    <li>Test</li> 
 
    <li>Test<br />Test</li> 
 
    </ul> 
 
</div>