Hide DIVs by ID on page load

I have the following JS in the page layout (running RoR):

<script>
  $(document).ready(function() {
    document.getElementById('1').style.display = 'none';
    document.getElementById('2').style.display = 'none';
    document.getElementById('3').style.display = 'none';
    document.getElementById('4').style.display = 'none';
    document.getElementById('5').style.display = 'none';
    });
</script>

I am trying to have the 5 divs to be hidden on page load but can not seem to get it to work. I can use JS or JQuery. I have tried this as well:

$(window).load(function() {
  ...js code...
});

and still could not get it to hide the divs on page load.

What do I need to write in JS to have div with id 1..5 to be hidden?