javascript – jquery-match-height不能在第一行工作

我在我的网站上使用 jquery-match-height 插件.

我不明白为什么插件在第一行不起作用.看起来插件试图输出样式高度,但第一行为空.第二排工作正常

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. <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.<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 href="#">More</a></p>
            </div>
        </div>
 
 
 
    </div><!--/ last-row-->
 
 
</div>

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

我的bootply：view(似乎没有工作atm)

我的jsfiddle：view

任何人都知道如何解决这个问题？

解决方法

Samus的 answer实际上是相当接近的,但是你想要的是：

>匹配每行内的.article-Box .well元素的高度
>每排都有不同匹配的高度

事实上,插件只是承诺：

matchHeight makes the height of all selected elements exactly equal

解决方案是单独选择每行中的元素,并将插件分别应用于每个集合,如下所示：

$(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
    });
});

你可以在this的工作中看到这个更新到你的jsFiddle.您将注意到第一排中的井,而第二列中的井是不同的高度,但是如果您使用浏览器的开发工具检查它们,则在每一行中相同.

javascript – jquery-match-height不能在第一行工作

解决方法

猜你在找的jQuery相关文章