jQuery and JQM - using closest with filter to get index

Question

I have a piece of html that, when JQM is done with it, looks like this (simplified):

<div id="servicesList">
    <div id="servicesHeader">Services</div>
    <ul data-role="listview" class="ui-listview">
        <li id="Serv1" class="serviceLink">Service 1</li>
    </ul>
    <ul data-role="listview" class="ui-listview">
        <li id="Serv2" class="serviceLink">Service 2</li>
    </ul>
</div>

This code is dynamically generated from another piece of script.

Each of the Services has a click event attached to it that pulls in some more data dynamically. Ideally, I'd like to be able to reference the index of the Service at the time that it's clicked on. Here's my current code:

$('.serviceLink').click(function() {
    var index = $(this).closest("ul").index();
    servAnimate(index);
});

Obviously, this doesn't work as the array of objects pulled in includes the servicesHeader div. How do I go about getting only the array of parent ul's? Essentially, when the user clicks on Service 1, the index returned should be a 0, not a 1. Right now, index 0 references the servicesHeader div.

I've also tried this:

$(this).closest("ul").filter("ul").index();

Any help would be appreciated!

EDIT: I should have specified that the HTML is being generated by a script from another developer. It may change, it may stay the same. The only assurance I have so far is that the ULs will stay on the same level and will have the class serviceLink.

So again, how do I get the index of the parent ULs only regardless of what other sibling elements exist?

Answer 1

Feel like a loser answering my own question!

I'm so used to just using index() by itself that I forgot you could add qualifiers to it. Plus, I was assuming (and told all of the answerers) that I had to work backwards from the clicked element and find its position. What I did instead was to build a list of elements based on things that I knew wouldn't change (the container div ID and the structure directly around each of the links) and just get the index of the clicked element from there:

$('.serviceLink').click(function() {
    var index = $('#servicesList ul[data-role="listview"] li.serviceLink').index(this);
    servAnimate(index);
});

I appreciate everone's help in working through this.

Answer 2

Unless I've overlooked something in your requirements, will this fit the bill?

$(function() {
    $('#servicesList .serviceLink').on('click', function() {
        alert($('.serviceLink').index(this));
    });
})​

This will return 0, when you click Service 1, and 1 when you click Service 2.

UPDATE: This will only find ".serviceLinks" inside the main div "servicesList"

Answer 3

Anything wrong with:

$('.serviceLink').click(function() {
    var index = $(this).closest("ul").index() - 1;
    alert(index);
});​

see http://jsfiddle.net/u4Hy4/

Answer 4

Introduce another DIV wrapping just the service list - ie the ULs. Then, .closest('div') will find this new div and the indexes will start at zero within it.

EDIT:

Try this:

$("#servicesList").on('click', 'ul', function() {
    var index = $(this).siblings("ul").andSelf().index(this);
    alert(index);
});

DEMO