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?

arb · Answer 1 · 2012-05-09T12:09:01.573

1

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"

edited May 09 '12 at 12:09

answered May 08 '12 at 20:02

arb

7,753
7
31
66

Just one problem. The other developer has been known to re-use classes in other sections of the app. – Chris Stahl May 09 '12 at 02:14
It's rather verbose but you could try `var index = $(this).closest(".serviceList").find("ul").index(this.closest("ul"));`. – Beetroot-Beetroot May 09 '12 at 02:42
Chris, typos on my part. See debugged & improved version [here](http://jsfiddle.net/AdHz2/) – Beetroot-Beetroot May 09 '12 at 03:23
But of course, acting on the ULs' click events rather than the LIs' makes it even simpler - [DEMO](http://jsfiddle.net/AdHz2/1/) – Beetroot-Beetroot May 09 '12 at 03:30
This WILL work. Check my own answer to see and comment what I came up with, though. – Chris Stahl May 10 '12 at 13:14

score 1 · Accepted Answer · answered May 10 '12 at 13:27

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.

Beetroot-Beetroot · Answer 3 · 2012-05-09T10:31:17.983

0

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

edited May 09 '12 at 10:31

answered May 08 '12 at 20:01

Beetroot-Beetroot

18,022
3
37
44

I would but I have no control over the markup except that the ULs will always be in the same div and as noted, there may be other sibling elements in the same div which would mess with the arrays. – Chris Stahl May 09 '12 at 02:15

score 0 · Answer 4 · answered May 08 '12 at 20:11

0

Anything wrong with:

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

see http://jsfiddle.net/u4Hy4/

answered May 08 '12 at 20:11

Lyn Headley

11,368
3
33
35

This would work if I knew with 100% certainty that the header div would stay where it was and no other divs were added in (such as a section header div for individual services). – Chris Stahl May 09 '12 at 02:07

jQuery and JQM - using closest with filter to get index

4 Answers4