title: jquery pass variable value outside of function
body: <p>I've got an unimaginably huge order form that I'm combing through for values and building an array from. Amongst other things, I've got some <code>each()</code> iterations that I need to extract values from, appending them to variables that are used afterwards. Problem is that the values are returning undefined, which I think is because they're being assigned within the loop.</p>
  
  <p>Here's my logic:</p>
  
  <ul>
  <li>Declare variables</li>
  <li>loop through each
  <ul>
  <li>assign value to variable</li>
  </ul></li>
  <li>post to array</li>
  </ul>
  
  <p>My understanding is that the variable declaration outside the function allows me to use it globally. Guess I'm wrong!</p>
  
  <p>Here's a jsFiddle: <a href="http://jsfiddle.net/x7CL6/" rel="nofollow">http://jsfiddle.net/x7CL6/</a></p>
  
  <p>Here's the code:</p>
  
  <pre><code>$('a').click(function(event){
  
      event.preventDefault();   
  
  /* Declare Variables */
  
      var test = [],
          one,
          two,
          three,
          four,
          el,
          kind,
          val;
  
  /* Loop through each paragraph */
  
      $('section').find('p').each(function(){
  
          el   = $(this);
          kind = el.attr('class');
          val  = el.html();
  
          if (val === '1'){
  
              one = val;
          } else if (val === '2'){
  
              two = val;
          } else if (val === '3'){
  
              three = val;
          } else if (val === '4'){
  
              four = val;    
          }
      });
  
      test.push({
          one: one,
          two: two,
          three: three,
          four: four
      });
  
      console.log(test);
  });
  ​
  </code></pre>