title: jQuery .index(), confusing changes with argument
body: <p><a href="http://learn.jquery.com/using-jquery-core/understanding-index/" rel="nofollow">http://learn.jquery.com/using-jquery-core/understanding-index/</a></p>
  
  <p>Perhaps I missed something in the article above, but I'm having some trouble understanding <em>why</em> the index number changes the way it does when an argument is used with .index().</p>
  
  <p>For instance, with </p>
  
  <pre><code>&lt;body&gt; 
          &lt;button id="console2"&gt;consoleSection2&lt;/button&gt;
          &lt;ul&gt;
              &lt;div class="test"&gt;&lt;/div&gt;
              &lt;li id="foo2"&gt;foo&lt;/li&gt;
              &lt;li id="bar2" class="test"&gt;bar&lt;/li&gt;
              &lt;li id="baz2"&gt;baz&lt;/li&gt;
              &lt;div class="test"&gt;&lt;/div&gt;
          &lt;/ul&gt;
          &lt;div id="last"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>if I run </p>
  
  <pre><code>console.log( 
      "Index: " + $("#foo2").index()
  );
  </code></pre>
  
  <p>I get <em>"Index: 1"</em>, whereas if I run</p>
  
  <p>"Index: " + $("#foo2").index("li")</p>
  
  <p>I get <em>"Index: 0"</em>. </p>
  
  <p>Why does it change? To me, it would stay the same since "#foo2" is already in an "li" element. </p>
  
  <p>Plus, why would it go to 0 as an Index? Is that because it's the first instance of "li" with an id of "#foo2"?</p>
  
  <p><a href="http://jsfiddle.net/f88zxaxo/" rel="nofollow">http://jsfiddle.net/f88zxaxo/</a></p>