title: change variable value outside function
body: <pre><code>$(".outerdiv .innerdiv").hover(function(){
      var variable = $(this).index();
  });
  var variable = 3;
  $("span").html(variable);
  </code></pre>
  
  <p>the original html of <code>&lt;span&gt;</code> is set as 3 using jquery but when hovering over an <code>.innerdiv</code> i want it to change to its index value by changing the variables outside the function to the index value of the specific <code>.innerdiv</code> that was hovered on. ​<a href="http://jsfiddle.net/eEUeT/9/" rel="nofollow">http://jsfiddle.net/eEUeT/9/</a></p>
  
  <pre><code>&lt;div class="outerdiv"&gt;
      &lt;div class="innerdiv"&gt;1&lt;/div&gt;
      &lt;div class="innerdiv"&gt;2&lt;/div&gt;
      &lt;div class="innerdiv"&gt;3&lt;/div&gt;
      &lt;div class="innerdiv"&gt;4&lt;/div&gt;
      &lt;div class="innerdiv"&gt;5&lt;/div&gt;
  &lt;/div&gt;    
  &lt;span&gt;&lt;/span&gt;​
  </code></pre>
  
  <p>I have tried <a href="http://jsfiddle.net/eEUeT/11/" rel="nofollow">http://jsfiddle.net/eEUeT/11/</a> this does not have a set orginal value of 3 however.</p>
  
  <hr>
  
  <p><strong>AND</strong> i understand by changing the html to <code>&lt;span&gt;3&lt;/span&gt;</code> and using the jquery below will work but i would rather learn how to do it the way i asked</p>
  
  <pre><code>$(".outerdiv .innerdiv").hover(function(){
      var variable = $(this).index();
  $("span").html(variable);
  });
  </code></pre>