jQuery - 各要素と各子供は高さを取得して設定します

Question

私は彼らがここで関連するトピックとより良い方法はフレックスボックスを使用していることを知っています。しかし、どうすればこのようなことができますか？

• 各.grid要素
• 最高の要素を検索し、各直接の子を見つけて、

が、私はこのHTMLを持っていると言うことができますそれにその兄弟を設定

<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が持ち、2番目の.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

、 のthatsはあなたのために働く必要があります。

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

幸運を！