Question

我通常使用它来匹配元素高度：

function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
    }

    $(function() {
        equalHeight($('.column'));
    });

但是，在我的情况下，我需要将元素匹配到最近的兄弟，而不是按类，使用以下示例

    <div class="post">
        <div class="leftCol">
            <h2>This is a post headline</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volut</p>
        </div>
        <div class="rightCol">
            <ul>
                <li></li>
            </ul>           
        </div>
    </div><!--/post-->

此结构的每页将有多个（超过15个）实例。我不希望将“.leftCol”的高度与“.rightCol”的高度相匹配 - 这是我不希望每个“.leftCol”匹配页面上的每个“.rightCol”，只是在每个“.post”组中 - 将“.leftCol”高度与“.rightCol”类的直接兄弟相匹配......任何想法？

Answer 1

如果你要做的是将每个leftCol / rightCol对设置为任何一个的较高者，但只在该对中，并且你想对所有对做同样的事情，你可以这样做：< / p>

$(".post .leftCol").each(function() {
    var $left = $(this);
    var $right = $left.next();
    var maxHeight = Math.max($left.height(), $right.height());
    $left.height(maxHeight);
    $right.height(maxHeight);
});

此代码的工作原理如下：

对于每个.post .leftCol对象
获取.leftCol jQuery对象
使用.rightCol

.next()

找出两者之间的最大高度
将此.leftCol和.rightCol对分别设置为最大高度

注意：您可以单独使用CSS解决此问题。请参阅CSS - Equal Height Columns?。

最高的高度匹配下一个元素

1 个答案: