title: jQuery: array[i].children() is not a function
body: <p>The following code is inspired by <a href="http://ignorethecode.net/blog/2010/04/20/footnotes/" rel="nofollow">http://ignorethecode.net/blog/2010/04/20/footnotes/</a>: when you move the cursor over the footnote symbol, the footnote is shown as a tool-tip.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;footnote demo&lt;/title&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&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;
  
  &lt;script&gt;
  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];
      //var sup = $fRef[i].children("sup");
      //var sup = $fRef.eq(i).children("sup");
      //var sup = $fRef.get(i).children("sup");
      //var sup = $($fRef[i]).children("sup");
      //debugger;
      sup.setAttribute('fnID',i);
      sup.onmouseover = function(event) {
          var fnTip = document.getElementById('fnTip');
          if(fnTip) fnTip.parentNode.removeChild(fnTip);
          var pTip = document.createElement('div');
          var fnT = document.getElementById($fRef[this.getAttribute('fnID')].getAttribute("href").substring(1)).innerHTML;
          pTip.innerHTML = removeElements(fnT,"a");
          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);
      };
  }
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My question is that the line <code>var sup = $fRef.children("sup")[i];</code> seems should be <code>var sup = $fRef[i].children("sup");</code>, or following <a href="https://stackoverflow.com/questions/28442138">.children() does not work on specified index of jquery return</a> . However, those ways (lines in the code are commented) are all not working. Please explain why <code>var sup = $fRef.children("sup")[i];</code> is working, and others are not working?</p>