jQueryを使用して動的にdivの高さを設定することができません

Question

this demoをご覧になり、なぜ高さを.boxに動的に設定できないのか教えてください。

$(function(){ 
    $(window).load(function(){ // On load 
     $('.box').css({'height':(($(window).height()))+'px'}); 
    }); 
    $(window).resize(function(){ // On resize 
     $('.box').css({'height':(($(window).height()))+'px'}); 
    }); 
}); 

<section> 
<div class="col-md-12" id="box-1">Height has been set!</div> 
</section> 
<section> 
<div class="col-md-12" id="box-2">Height has been set!</div> 
</section> 
<section> 
<div class="col-md-12" id="box-3">Height has been set!</div> 
</section> 
<section> 
<div class="col-md-12" id="box-4">Height has been set!</div> 
</section> 
<section> 
<div class="col-md-12" id="box-5">Height has been set!</div> 
</section> 

Answer 1

まず、間違ったセレクタを使用しています。 "col-md-12"という名前のクラスを照会する必要があります。

次に、3.0のJQueryから削除されたwindow.load()イベントを使用しています（hereを参照）。あなたは$(document).ready(function() {})または$(window).on("load",function(){})

あなたのコードは次のようになります使用することができ、次のいずれか

$(function(){ 
    $(document).ready(function(){ // On load 
     $('.col-md-12').css({'height':(($(window).height()))+'px'}); 
    }); 
    $(window).resize(function(){ // On resize 
     $('.col-md-12').css({'height':(($(window).height()))+'px'}); 
    }); 
}); 

Answer 2

あなたは存在しないクラスを指しています。 $（ "。box"）の代わりに$（ "[id^= 'box-']"）を使用してください - "box"クラスのものは探していませんが、のものは文字列 'box-'。

（または、あなたのサイズにしたい各要素に、「ボックス」クラスを追加し、元のjQueryのセレクタを残すことができる;多分それはより良いアプローチだ、それはあなたのサイトの残りのロジックに依存してあなたが決めます。 ）

1. $（ "[ID^= 'ボックス - ']"
2. $（ "ボックス "））とクラス=" COL-MD-12ボックス" 等のdiv