How to get the (DOM/document) index of a clicked element in JQuery
<p>I want to get the index of a clicked element using jquery - this should be easy with <code>.index()</code> but I don't want the index within a narrowly defined selector such as <code>$('div').index()</code>.</p>

<p>What I want is the unique index of that element on the page/in the DOM - something like <code>$(everything).index()</code> if it existed.</p>

<p>Here's my simple jquery click function:</p>

<pre><code>$("div").click(function (e) {
   e.stopPropagation();
   index = $(this).index();
}); 
</code></pre>

<p>Which I've used with some sample HTML:   </p>

<pre><code>&lt;div&gt;DIV 0 - I want to show as index=0 (which I do)&lt;/div&gt;
&lt;div&gt;DIV 1 - I want to show as index=1 (which I do)&lt;/div&gt;

&lt;span&gt;SPAN 0 - I want to show as (span) index=0&lt;/span&gt;

&lt;div&gt;DIV 2 - I want to show as index=2 (but I don't, I show as 3)
    &lt;div&gt;DIV 3 - I want to show as index=3 (but I don't, I show as 0)&lt;/div&gt;
    &lt;span&gt;SPAN 1 - I want to show as (span) index=1&lt;/span&gt;
    &lt;span&gt;SPAN 2 - I want to show as (span) index=2&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>I've <a href="http://jsfiddle.net/6n5zp/" rel="nofollow">JSfiddled</a> about with it to play with.</p>

<p>My problems are these:</p>

<p>1) I don't know how to get a unique index number for these DIVS (or any other element for that matter) as <code>$(this)</code> only refers to the CURRENT selection, so embedded DIVs re-index at zero, once clicked.</p>

<p>2) I need this to work for ANY/ALL html tags (not just DIVs)</p>

<p>Thanks for any help you could give! </p>
