迭代不同的列表项以匹配高度

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列中的第一个li应该与第2列中的第一个li相同 - 这里：

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

您的HTML代码中没有任何ID为firstTab的元素。我添加它并且工作正常。顺便说一句，我建议将设置高度部分保持在循环之外。如果您要在多个列表中应用此调整，则可以使用class选择器而不是id选择器。与.adjustedTab

一样

＆＃13;

＆＃13;

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);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;