jquery-match-height在第一行没有工作

Question

我在我的网站上使用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. 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:view(似乎没有工作atm)

我的jsfiddle:查看

有谁知道如何解决这个问题？

Answer 1

萨姆斯的答案实际上非常接近,但考虑到你想要的是:

• 匹配.article-box .well每行内元素的高度
• 每行有不同的匹配高度

而插件只是做出承诺的事实:

matchHeight使所有选定元素的高度完全相等

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

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

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

Answer 2

默认选项是按行 - https://github.com/liabru/jquery-match-height#options

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

你去吧 :)