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

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

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>

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

Iterate in order different list items to match height

each

jquery