jquery - 为包裹在不同 div 中的列设置相同的高度

Question

我是 jQuery 的新手，对它不太了解。

抱歉，如果这是转贴。我得到了几个关于堆栈溢出的例子，但场景有点不同。

Here是理解我想要实现的目标的 HTML。

我希望具有相同边框的部分具有相同的高度(高度是动态的)。

我无法更改 HTML。

HTML

<div class="container">
  <div class="row">
    <div class="span6">
      <div class="sec1">
        <h3>Lorem ipsum dolor sit amet</h3>
        <ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>  
      </div>
      <div class="sec2">
        <h3>Lorem ipsum dolor sit amet</h3>
        <ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
          <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>  
      </div>
      <div class="sec3">
        <h3>Lorem ipsum dolor sit amet</h3>
        <ul> 
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        </ul>   
      </div>
    </div>
    <div class="span6">
      <div class="sec1">
        <h3>Lorem ipsum dolor sit amet</h3>
        <ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
          <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>   
      </div>
      <div class="sec2">
        <h3>Lorem ipsum dolor sit amet</h3>
        <ul> 
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        </ul>   
      </div>
      <div class="sec3">
        <h3>Lorem ipsum dolor sit amet</h3>
        <ul> 
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>

        </ul>   
      </div>
    </div>
  </div>
</div>

CSS

[class*="sec"] {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
.sec2 {
  border-color: red
}
.sec3 {
  border-color: green
}

Answer 1

你可以像this那样做

jQuery

$(document).ready(function(){
  var maxHeight = -1;

  for (var secCount=0;secCount<4;secCount++){
    $('.sec'+secCount).each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.sec'+secCount).each(function() {
     $(this).height(maxHeight);
   });
  }

})