jQuery - 每個元素和這個每個孩子得到並設置高度

Question

我知道他們在這裏相關的主題和更好的方法是使用flexbox。但我怎麼能做出這樣的事情呢？

• 找出每個.grid元素
• 查找最高元素的每個直接兒童，並設置它的兄弟姐妹

比方說，我有這個網站

<div class="grid"> 
    <div class="col-3"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia saepe veritatis, veniam! Quisquam quis tenetur eius, debitis possimus expedita eligendi amet incidunt quo. Alias dolores, amet error aperiam, quaerat cumque. 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur provident consequatur, id corrupti, vitae, sapiente, ipsa explicabo ad eaque impedit alias vel. Explicabo esse odit, autem ab eius rerum odio. 
    </div> 
    <div class="col-2"> 
    short 
    </div> 
</div> 

<div class="grid"> 
    <div class="col-3"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia saepe veritatis, veniam! Quisquam quis tenetur eius, debitis possimus expedita eligendi amet incidunt quo. Alias dolores, amet error aperiam, quaerat cumque. 
    </div> 
    <div class="col-2"> 
    short 
    </div> 
</div> 

而且有點CSS ：

.grid:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

[class*='col-'] { 
    float: left; 
    border: 1px solid black; 
} 

.col-3 { 
    width: 30%; 
} 
.col-4 { 
    width: 40%; 
} 
.col-2 { 
    widdth: 20%; 
} 

目標是在第一個網格集.col-2與.col-3具有相同的高度，第二個.grid做同樣的高度。

這裏是我的jQuery尚未：

$(".grid").each(function(){ 
    $(this).children().each(function() { 
    var height = $(this).height(); 
    console.log(height); 
    }); 
}); 

Codepen是在這裏：http://codepen.io/anon/pen/amzkqy?editors=1011

Answer 1

試試這個：

var max = 0; 
$(".grid").each(function(){ 
    var children = $(this).children(); 
    children.each(function() { 
    if (max < $(this).height()) max = $(this).height(); 
    }); 
    children.each(function() { 
    console.log(max); 
    $(this).height(max); 
    }) 
}); 

它從兒童的最大高度，然後設置高度與最大。

Answer 2

如果我明白你的意思，這就是 應該爲你工作：

$(".grid").each(function(){ 
    var height = 0; 
    $(this).children().each(function() { 
    height = ($(this).height() > height) ? $(this).height() : height ; 
    console.log(height); 
    }); 
    $(this).children().each(function() { 
    $(this).height(height); 
    }); 
}); 

祝您好運！