title: Set dynamic css width to children of a container using jQuery
body: <p>I am trying to set the width of a number of child elements dynamically using jQuery. What I am trying to do is the following</p>
  
  <ol>
  <li>Get the count of the desired containers (as I'll be having multiple instances of the .steps-container class in the DOM)</li>
  <li>Iterate through their children</li>
  <li>Set the width of their children by applying the following formula: width = 100 / number of children</li>
  </ol>
  
  <p>I have this:</p>
  
  <pre><code>$(document).ready(function() {
  
      var setStepsWidth = function(stepsContainer) {
  
          var el = stepsContainer,
              count = stepsContainer.length,
              childrenCount = 0;
  
          for( var i = 0; i &lt; count; i++ ) {
  
              childrenCount = el[i].children.length;
  
              var containerChildren = el[i].children;
              console.log(containerChildren);
  
  
              for(var j = 0; j &lt; childrenCount; j++) {
  
                  //test to see if it's working
                  childrenCount[j].css('background-color', 'red');
  
              }
  
  
          }
      };
  
      setStepsWidth($('.steps-container'));
  
  });
  </code></pre>
  
  <p>The code returns an error: "Uncaught TypeError: Cannot read property 'css' of undefined "</p>
  
  <p>What am I missing?</p>