How can I get the index of non-sibling elements in jquery?

Question

HTML:

<ul>
    <li>Help</li>
    <li>me</li>
    <li>Stack</li>
    <li>Overflow!</li>
</ul>

<br>

<ul>
    <li>Can</li>
    <li>I</li>
    <li>connect</li>
    <li>these?</li>
</ul>

Javascript/JQuery:

$("li").live('click', function(){

alert($(this).index());

});

I put together a simple jsfilled page to help describe my problem: http://jsfiddle.net/T4tz4/

Currently clicking on an LI alerts the index relative to the current UL group. I'd like to know if it was possible to get a 'global index' so that clicking on "Can" returns the index value of 4.

Thank you, John

Answer 1

Just put the 'li' selector inside index()

$('li').live('click', function() {
    alert( $(this).index('li') );
});

Live demo: http://jsfiddle.net/T4tz4/3/

---

http://api.jquery.com/index/

If a selector string is passed as an argument, .index() returns an integer indicating the position of the original element relative to the elements matched by the selector.