Javascript 如何根据旁边的div级别设置div高度？

好的，我有以下布局：

<div class="double_column_left">
    //Left responsive content
</div>
<div class="double_column_right">
    //Right responsive content
</div>

<div class="double_column_left">
    //More left responsive content
</div>
<div class="double_column_right">
    //More right responsive content
</div>

//左响应内容
//右响应内容
//更具左倾响应性的内容
//更正确的响应内容

我需要的是使每组列的高度（每一列的左侧和右侧相邻）都是相同的值。因此，如果左侧比右侧高，它会在Javascript中将右侧列设置为左侧的高度，反之亦然

这在Javascript/jQuery中似乎很容易做到，在页面中循环并根据每次调整页面大小时遇到的div的顺序匹配每一组div；但我以前从未真正做过这样的事情，也不知道该怎么做

有什么想法吗？

试试这个

$('.double_column_right').height(function () {
    return $(this).prev().height();
});

---

尝试以下工作解决方案：

检索一个div'.double_column_right'的高度，并将其应用于另一个div（'.double_column_left'）的最小高度。使用以下JQuery代码：

var divHeight = $('.double_column_right').height();

$('.double_column_right').css('min-height', divHeight+'px');

这应该起作用：

function resizeColumns() {
    var $leftColumns = $('.double_column_left');
    $leftColumns.each(function() {
        var $leftCol = $(this);
        var $rightCol = $leftCol.next('.double_column_right');
        var height = Math.max($leftCol.height(), $rightCol.height());
        $leftCol.add($rightCol).height(height);
    });
 }

现在，当需要调整列的大小时，只需调用此函数。特别是在页面加载和窗口大小更改时：

 $(document).ready(resizeColumns);
 $(window).on('resize', resizeColumns);

---

这将使所有列左侧等于所有列权限：

JQUERY

var col1 = $(".double_column_left").height(),
    col2 = $(".double_column_right").height();
if (col1 > col2) {$(".double_column_right").height(col1); } else {
    $(".double_column_left").height(col2);
}

---

我不同意你的答案，如果是相反的呢？；-）然后更改选择器并使用

.next（）

？你不同意什么？你最终会遇到同样的问题。您需要首先检查哪一列是较大的，然后更改另一列。这将使所有列的高度相同，而不仅仅是成对的。您是对的，我误解了这个问题。@3rror404感谢您链接到该列，尽管这是基于CSS的，而不是我正在尝试使用的Javascript。如果下面的答案中没有一个是正确的，请以4票的优势查看答案useful@3rror404我在另一篇文章中使用了flexbox解决方案，因为它碰巧解决了我遇到的其他一些问题以及这个问题。