title: Understanding the procedure in the execution of javascript
body: <p>I am trying to understand the running procedure of JavaScript, but stuck. First question, in line 32 of the Example in <a href="https://api.jquery.com/jQuery.each/" rel="nofollow">https://api.jquery.com/jQuery.each/</a> , why the script will <code>Will stop running after "three"</code>?</p>
  
  <p>Second question, which is related to <a href="https://stackoverflow.com/questions/39558138">jQuery: array[i].children() is not a function</a>, I update the code as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var removeElements = function(text, selector) {
        var wrapped = $("&lt;div&gt;" + text + "&lt;/div&gt;");
        wrapped.find(selector).remove();
        return wrapped.html();
      }
  
      var $fRef = $(".footnoteRef");
      for (var i = 0; i &lt; $fRef.length; i++) {
        var sup = $fRef.children("sup")[i];
        //sup.setAttribute('fnID', $fRef[i].getAttribute("href").substring(1));
        var fnT = removeElements(document.getElementById($fRef[i].getAttribute("href").substring(1)).innerHTML, "a");
        sup.onmouseover = function(event) {
          var fnTip = document.getElementById('fnTip');
          if (fnTip) fnTip.parentNode.removeChild(fnTip);
          var pTip = document.createElement('div');
          //pTip.innerHTML = removeElements(document.getElementById(this.getAttribute('fnID')).innerHTML,"a");
          pTip.innerHTML = fnT;
          pTip.id = 'fnTip';
          pTip.style.position = 'absolute';
          pTip.style.left = (event.pageX - 180) + 'px';
          pTip.style.top = (event.pageY + 20) + 'px';
          pTip.style.width = '360px';
          pTip.style.textIndent = '2em';
          pTip.style.textAlign = 'left';
          pTip.style.backgroundColor = '#FFFFE0';
          pTip.style.border = '1px solid #636363';
          pTip.style.padding = '5px';
          pTip.style.fontSize = '12px';
          pTip.style.lineHeight = '1.8';
          pTip.style.borderRadius = '5px';
          document.body.appendChild(pTip);
        };
  
        sup.onmouseout = function(event) {
          var fnTip = document.getElementById('fnTip');
          if (fnTip) fnTip.parentNode.removeChild(fnTip);
        };
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;p&gt;Baryonyx was a theropod dinosaur of the early Cretaceous Period, about 130–125 million years ago&lt;a href="#fn1" class="footnoteRef" id="fnref1"&gt;&lt;sup&gt;1&lt;/sup&gt;&lt;/a&gt;. An identifying specimen of the genus was discovered in 1983 in Surrey, England; fragmentary
    specimens&lt;a href="#fn2" class="footnoteRef" id="fnref2"&gt;&lt;sup&gt;2&lt;/sup&gt;&lt;/a&gt; were later discovered in other parts of the United Kingdom and Iberia. Meaning "heavy claw", Baryonyx refers to the animal's very large claw (31 cm or 12 in) on the first finger.
    The 1983 specimen&lt;a href="#fn3" class="footnoteRef" id="fnref3"&gt;&lt;sup&gt;3&lt;/sup&gt;&lt;/a&gt; is one of the most complete theropod skeletons from the UK, and its discovery attracted media attention.&lt;/p&gt;
  
  &lt;div class="footnotes"&gt;
    &lt;hr&gt;
    &lt;ol&gt;
      &lt;li id="fn1"&gt;
        &lt;p&gt;Baryonyx caught and held its prey primarily with its strong forelimbs and large claws.&lt;a href="#fnref1"&gt;↩&lt;/a&gt;
        &lt;/p&gt;
      &lt;/li&gt;
      &lt;li id="fn2"&gt;
        &lt;p&gt;The creature lived near bodies of water, in areas where other theropod, ornithopod, and sauropod dinosaurs have also been found. &lt;a href="#fnref2"&gt;↩&lt;/a&gt;
        &lt;/p&gt;
      &lt;/li&gt;
      &lt;li id="fn3"&gt;
        &lt;p&gt;It had a long, low, bulbous snout and narrow, many-toothed jaws, which have been compared to gharial jaws.&lt;a href="#fnref3"&gt;↩&lt;/a&gt;
        &lt;/p&gt;
      &lt;/li&gt;
    &lt;/ol&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When the mouse is over the footnote symbol superscript 1 and 2, the tool-tip shows the content of footnote 3. Why not show its own footnote?</p>
  
  <p>I am puzzled.</p>
  
  <p>This is not a simple duplicate of <a href="https://stackoverflow.com/questions/750486">JavaScript closure inside loops – simple practical example</a> , there are 2 questions here: the first one related to the unique mechanism of jQuery's <code>$.each()</code> loop. The second one is related to closure inside loops, however, here we using jQuery, and we also provide specific solution (<code>setAttribute</code> to save the state and retrieve when event triggered).</p>