jquery-match-height không hoạt động trên hàng đầu tiên

Question

Im sử dụng jquery-match-height plugin trên trang web của tôi.

Tôi không hiểu tại sao plugin không hoạt động trên hàng đầu tiên. Có vẻ như plugin đang cố gắng tạo ra chiều cao kiểu, nhưng nó trống trên hàng đầu tiên. Hàng thứ hai đang hoạt động tốt.

html

<div class="container"> 

    <div class="row article-box-list"> 
      <div class="col-xs-12 col-md-8 article-box"> 
       <a href="#"><img src="http://dummyimage.com/768x410/000/fff" alt="" class="img-responsive"></a> 

       <div class="well well-white"> 
        <h2><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></h2> 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <a href="#">More</a></p> 
       </div> 
      </div> 


      <div class="col-xs-12 col-md-4 article-box"> 
       <a href="#"><img src="http://dummyimage.com/768x853/000/fff" alt="" class="img-responsive"></a> 

       <div class="well well-white"> 
        <h4><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></h4> 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <a href="#">More</a></p> 
       </div> 
      </div> 
    </div><!-- /first-row--> 




    <div class="row article-box-list"> 

     <div class="col-xs-12 col-md-4 article-box"> 
      <a href="#" class="img-link"><img src="http://dummyimage.com/768x585/000/fff" alt="" class="img-responsive"></a> 

      <div class="well well-white"> 
       <h4><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></h4> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">More</a></p> 
      </div> 
     </div> 



     <div class="col-xs-12 col-md-4 article-box"> 
      <a href="#" class="img-link"><img src="http://dummyimage.com/768x585/000/fff" alt="" class="img-responsive"></a> 

      <div class="well well-white"> 
       <h4><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></h4> 
       <p class="ingress">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<a href="#">More</a></p> 
      </div> 
     </div> 


     <div class="col-xs-12 col-md-4 article-box"> 
      <a href="#" class="img-link"><img src="http://dummyimage.com/768x585/000/fff" alt="" class="img-responsive"></a> 

      <div class="well well-white"> 
       <h4><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></h4> 
       <p>Lorem ipsum dolor sit amet, consectetuer. <a href="#">More</a></p> 
      </div> 
     </div> 



    </div><!--/ last-row--> 


</div> 

js

$(function() { 
    $('.article-box .well').matchHeight(); 
});  

bootply của tôi: view (dường như không có tác dụng atm)

jsfiddle của tôi: view

01.

Bất cứ ai biết cách tôi có thể sửa lỗi này?

Answer 1

Samus của answer thực sự là khá chặt chẽ nhưng cho rằng những gì bạn muốn là:

• trận đấu đỉnh cao của các .article-box .well yếu tố trong mỗi hàng
• có chiều cao phù hợp khác nhau cho mỗi hàng

Và thực tế là các plugin đơn giản là làm cho lời hứa:

matchHeight làm cho chiều cao của tất cả các yếu tố được lựa chọn chính xác bằng

Giải pháp là để chọn các yếu tố trong mỗi hàng cá nhân và áp dụng các plugin cho mỗi bộ sưu tập riêng biệt như vậy:

$(function() { 
    $('.row').each(function(i, elem) { 
     $(elem) 
      .find('.article-box .well') // Only children of this row 
      .matchHeight({byRow: false}); // Row detection gets confused so disable it 
    }); 
}); 

bạn có thể thấy điều này tại nơi làm việc trong this cập nhật cho jsFiddle của bạn. Bạn sẽ nhận thấy các giếng ở hàng đầu tiên và các giếng trong hàng thứ hai có chiều cao khác nhau nhưng giống nhau trong mỗi hàng nếu bạn kiểm tra chúng bằng các công cụ tìm kiếm của trình duyệt.

Answer 2

Hãy thử điều này Bootstrap bằng cột chiều cao CSS-chỉ sửa chữa từ Minimit thay vì:

http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

Bạn cũng sẽ cần CSS này trên wells cho họ để điền vào các cột chiều cao bây giờ bình đẳng:

.well { 
    display:inline-block; 
    width:100%; 
    height:100%; 
    margin-top:0; 
} 

Answer 3

Mặc định lựa chọn là bởi hàng - https://github.com/liabru/jquery-match-height#options

$('.article-box .well').matchHeight({ 
    byRow: 0 
}); 

Có bạn đi. :)

Answer 4

Bạn đang áp dụng matchHeight() trên .article-box .well không có anh chị em nào.

Nó phải là

$(function() { 
    $('.article-box').matchHeight(); 
}); 

Appply một số màu nền để article-box để xem kết quả.

Answer 5

Phế liệu plugin.Làm điều đó bằng tay:

http://jsfiddle.net/9ru53a28/16/

$(function() { 
    $('.row').each(function() { 
     var intHeight = 0; 
     $(this).find('.well').each(function() { 
      if ($(this).outerHeight() > intHeight) { 
       intHeight = $(this).outerHeight() 
      } 
     }); 
     $(this).find('.well').each(function() { 
      $(this).outerHeight(intHeight) 
     }); 
    }); 
}); 

Answer 6

Tôi gặp vấn đề tương tự khi matchHeight dường như không hoạt động, tuy nhiên sau khi gỡ lỗi, tôi nhận ra rằng phần tử đầu tiên bên dưới DIV mà tôi nhắm mục tiêu có giá trị biên lớn nhất. jQuery matchHeight có vấn đề với giá trị ký tự âm.

Chỉ cần đăng nó ở đây để có thể trợ giúp cho ai đó có thể đang sử dụng giá trị ký quỹ âm với matchHeight.