Question

我想从3 li获得最大ul高度并分别应用它们。

例如，如果第一行中间的ul具有高度，它将应用于同一行的第一个和第三个li。

<div class="first_col">
    <ul>
        <li>first-ul</li>
        <li>first-ul</li>
        <li>first-ul</li>
        <li>first-ul</li>
    </ul>
</div>

<div class="sec_col">
    <ul>
        <li>sec-ul</li>
        <li>sec-ul</li>
        <li>sec-ul</li>
        <li>sec-ul</li>
    </ul>
</div>

<div class="third_col">
    <ul>
        <li>three-ul</li>
        <li>three-ul</li>
        <li>three-ul</li>
        <li>three-ul</li>
    </ul>
</div>

jQuery(document).ready(function($) {
    var ht = [];
    $('.first_col li').each(function(index) {
        ht[index] = $(this).height();
        console.log(ht[index]);
    });

    $('.sec_col li').each(function(index) {
        $(this).css('height', ht[index]);
    });

    $('.third_col li').each(function(index) {
        $(this).css('height', ht[index]);
    });           
});

Answer 1

您可以通过在第一个li内循环ul，在同一索引处检索其他li中的ul，然后均衡其高度来实现此目的。试试这个：

jQuery(document).ready(function($) {
  $('.first_col li').each(function(index) {
    var $li = $('ul').find('li:eq(' + index + ')');
    var height = $li.map(function() {
      return $(this).height();
    }).get();
    $li.height(Math.max.apply(this, height));
  });

});

li {
  border: 1px solid #C00;
}
.first_col li:nth-child(1) {
  height: 50px;
}
.sec_col li:nth-child(3) {
  height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first_col">
  <ul>
    <li>first-ul</li>
    <li>first-ul</li>
    <li>first-ul</li>
    <li>first-ul</li>
  </ul>
</div>

<div class="sec_col">
  <ul>
    <li>sec-ul</li>
    <li>sec-ul</li>
    <li>sec-ul</li>
    <li>sec-ul</li>
  </ul>
</div>

<div class="third_col">
  <ul>
    <li>three-ul</li>
    <li>three-ul</li>
    <li>three-ul</li>
    <li>three-ul</li>
  </ul>
</div>

请注意，上例中的CSS只是为了使代码的效果更加明显，逻辑无需工作。

Answer 2

请在下面找到解决方案的代码，

function applyMaxHeightToAll(){
            var values = $('ul');
            var height = 0;
            for (var i =0; i<values.length; i++) {
              if(parseInt($(values[i]).height())>height){
                height = parseInt($(values[i]).height());
              }
            }
            for(var i =0; i<values.length; i++){
                $(values[i]).css("height",height);
            }
        }

感谢。

Answer 3

使用jQuery.each更容易

function set_max_height(){
    $('.row').each(function(){
        var max = 0;
        $(this).find('ul').each(function(){
            var h = $(this).height();
            if(h>max) max = h;
        });
        $(this).find('ul').css("height",max);
    });
}

<div class="row">
    <div class="first_col">
        <ul>
            <li>first-ul</li>
            <li>first-ul</li>
            <li>first-ul</li>
            <li>first-ul</li>
        </ul>
    </div>

    <div class="sec_col">
        <ul>
            <li>sec-ul</li>
            <li>sec-ul</li>
            <li>sec-ul</li>
            <li>sec-ul</li>
        </ul>
    </div>

    <div class="third_col">
        <ul>
            <li>three-ul</li>
            <li>three-ul</li>
            <li>three-ul</li>
            <li>three-ul</li>
        </ul>
    </div>
</div>

从3 ul获得最大li高度并将其全部添加

3 个答案: