Question

我有4个元素以响应式布局显示。响应能力很好。这四个元素具有相同的类，这就是函数用作参考的元素。

这4个元素分为2个div（parent1和parent2）。

Parent1 包含2个子div（child1和child3）， parent2 包含2个div（child2和child4） - Child1和child2是那些需要同样大的人。 - child3和child4是那些需要同样大的人。

示例1：如果child1大于2，则child1应该与子级2的大小相同.Child3和child4不应该增长。

示例2：如果child2大于child1，则child1应与child2的大小相同。如果child4大于child3，则child3应与child4以相同的大小增长。

我在 Jquery 中编写了一个函数，该函数适用于某个部分。我的问题是它在某种程度上错过了循环中的第一个元素，并告诉它在第一个元素较小而第二个元素较大时增长。第三和第四个元素正确响应。我有点陷入其中，因为我无法弄清楚为什么第一个元素被传递过来。一些新的见解将不胜感激。

谢谢！

var alignHeight = function () {
var cols = $(".presel-cell-path"); //.length;
var colslength = $(".presel-cell-path").length;
var previousHeight;
var elem;
var currentElem;

for (i = 0; i < colslength ; i++) {
    cols.eq(i).css({ "height": "auto" });
    if (previousHeight === 0 || previousHeight === undefined || previousHeight < cols.eq(i).height()) {
        elem = cols.eq(i);
        currentElem = i;
       // console.log(currentElem);
        previousHeight = cols.eq(i).height();
        //console.log(previousHeight);
    }
    if (i % 2 === 0) {
        cols.eq(currentElem + 2).height(previousHeight);
        console.log("first:",currentElem);
    }

    else {
        cols.eq(currentElem - 2).height(previousHeight);
        console.log("second:", currentElem);
    }
}

}

更新

对于Jquery代码，请查看小提琴。 JSFIDDLE

Answer 1

嗯..试试这个：

var alignHeight = function () {
    var parentDiv = $('.parentdiv');
    var childDivs = $('.childdiv');
    childDivs.height('auto');
    parentDiv.each(function(item){
        var currentChild = $(this).find('.childdiv');
        var firstChild = currentChild[0];
        var secondChild = currentChild[1];
        if($(firstChild).height() > $(secondChild).height()) {
            $(secondChild).height($(firstChild).height());
        } else if ($(firstChild).height() < $(secondChild).height()) {
            $(firstChild).height($(secondChild).height());
        }
    })
}

$(window).on('resize', function () {
    alignHeight();
});

基本上对于每个父母，我检查两个孩子，看看哪个更大，并将相同的高度应用到另一个。我认为这就是你想要的。

如果您想要更改多个孩子的功能，可以在parentDiv.each()内查看最大的孩子是什么，并将该身高应用于所有孩子。

使前一个较小的子div或最后一个较小的子div匹配div具有最大高度

1 个答案: