Receive index of list element using jQuery

Question

i have an unordered list with an unknown number of list items. it looks like this:

<ul id="keyvisualpager">
    <li><a><span>first</span></a></li>
    <li><a><span>second</span></a></li>
    <li><a><span>third</span></a></li>              
    <li><a><span>and so on</span></a></li>              
    <li><a><span>fsdfsf</span></a></li>             
    <li><a><span>asdad</span></a></li>              
</ul>

when the user clicks on a link, i need to find out the index of the list element and assign it to a variable. e.g. if the user is clicking the second link ("second") the variable should be set to "2"...

$('#keyvisualpager li a').click(function () { 

     // receive index of list element
     var mbr_index = ???;   


});

i have to use jquery 1.2.1 ... so no fancy stuff please :)

any help is greatly appreciated, thanks!

Felix Kling · Accepted Answer · 2011-09-22 19:16:01Z

4

Maybe you overlooked that .index(element) ^[docs] was already available in jQuery 1.0:

var $items = $('#keyvisualpager li');

$items.find('a').click(function () { 
     var mbr_index = $items.index($(this).parent()) + 1; // one based index
});

Original answer:

This should work in jQuery 1.2:

var mbr_index = $(this).parent().prevAll().length + 1; // one based index

edited Sep 22, 2011 at 19:16

answered Sep 22, 2011 at 19:05

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cᴏʀʏ · Accepted Answer · 2011-09-22 19:10:20Z

1

You might consider assigning the click a little more manually using each(). You can iterate over the list items and have the index available to you. You can find the anchor within the list item and bind its click method.

$('#keyvisualpager li').each(function(index) {
    $(this).find('a').bind('click', function() {
        var mbr_index = index + 1; // indices start at 0
        ...
    });
});

each() was available in jQuery 1.0 so you should be able to use it no problem.

edited Sep 22, 2011 at 19:10

answered Sep 22, 2011 at 19:04

Cᴏʀʏ

108k20 gold badges169 silver badges201 bronze badges

Collectives™ on Stack Overflow

Receive index of list element using jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related