title: JavaScript - Dynamic Array and Looping
body: <p>Imagine you have a product page. On this page there are two select inputs with options in them. </p>
  
  <p>There is one for Size and Colour. This can change depending on the product, e.g. a curtain might have a size, length and colour (three select menus).</p>
  
  <p>The array is created dynamically (based on each select menu and its options): </p>
  
  <pre><code>var dynamicArr = [],
      i,
      j,
      opt,
      $('.select');
  
  for (i = 0; i &lt; select.length; i += 1) {
  
      opt = select.eq(i).find('option');
  
      if (dynamicArr[i] === undefined) {
          dynamicArr[i] = [];
      }
  
      for (j = 0; j &lt; opt.length; j += 1) {
          dynamicArr[i].push(opt.eq(j));
      }
  
  }
  </code></pre>
  
  <p>Imagine the page had a size and colour drop-down. The above would create an array like this:</p>
  
  <pre><code>dynamicArr = [['size'], ['color']]
  </code></pre>
  
  <p>I want to loop through each of these separately (in order to get individual values and compare them). </p>
  
  <p><strong>My problem starts here. A dynamic array might have a length of 1, 2, 3, 4, 5, 6 (depending on the select options on the page). I therefore can't do this as there won't always be two selects</strong></p>
  
  <pre><code>for (i = 0; i &lt; dynamicArr[0].length; i += 1) { 
  }
  for (i = 0; i &lt; dynamicArr[1].length; i += 1) { 
  }
  </code></pre>
  
  <p>How would I go about finding out the length and looping individually like the above e.g. if there are three selects, it will automatically know there are this many and loop through them like above.</p>
  
  <p>If you are still confused, let me know.</p>
  
  <p>Thanks.</p>