Get parent index with jQuery

Question

<ul class="bullets">
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
  <li><a href="#">item 4</a></li>
  <li><a href="#">item 5</a></li>
</ul>

When I click on the <a> element, i'd like to get it's parent <li>'s index number.

I'm trying to create a carrousel type function that doesn't need item-n classes on the list items.

$(".bullets li a").click(function(){

   var myIndex = $(this).parent().index(this);
   showPic(myIndex);

});

Thanks for any help.

TD.

score 43 · Answer 1 · edited Jun 12 '17 at 12:34

43

$(this).parent().index();

short and sweet

Correction : this is not short and sweet

from where this comes it should be like:

$(".bullets li a").click(function(){
    var myIndex = $(this).parent().index();
    console.log(myIndex);
    showPic(myIndex);
});

edited Jun 12 '17 at 12:34

Anup

3,283
1
28
37

answered Mar 30 '11 at 15:13

James

431
4
3

score 29 · Accepted Answer · answered Aug 20 '09 at 14:23

29

$(".bullets li a").click(function(){

   var myIndex = $(this).parent().prevAll().length;
   showPic(myIndex);

});

Note: prevAll().length will give you a zero-based index; the first item will be 0 (zero).

answered Aug 20 '09 at 14:23

James

109,676
31
162
175

10

Kindly note the date of this answer. [James' answer](http://stackoverflow.com/questions/1306503/get-parent-index-with-jquery/5488252#5488252) is simpler and more up-to-date. – Gan Aug 19 '11 at 10:14
I find this a lot better than the other answer when you don't have 'this' directly. You don't go like $('blabla').parent().index($(blabla)). – Fatih Aktaş Oct 22 '21 at 10:30

score 2 · Answer 3 · edited Jun 12 '17 at 12:31

2

$(".bullets li a").click(function(){
    var myIndex = $(this).parent().index();
    console.log(myIndex);
    showPic(myIndex);
});

edited Jun 12 '17 at 12:31

Anup

3,283
1
28
37

answered Aug 20 '09 at 14:30

bjoernwibben

1,561
13
7

score 2 · Answer 4 · answered Aug 20 '09 at 14:31

2

How I'd do it

$(".bullets li a").click(function()
    {
  var $li = $(this).parent();
  var myIndex = $li.parent().children().index( $li );
  alert( myIndex );
});

answered Aug 20 '09 at 14:31

Peter Bailey

105,256
31
182
206

score 1 · Answer 5 · answered Aug 20 '09 at 14:28

1

$(".bullets li a").click(function(){
   var me = $(this);
   var myIndex = $.each($("li", $(this).parent().parent()), function(i, item){
      if(item == me){
      showPic(i);
   });
});

answered Aug 20 '09 at 14:28

Marius

57,995
32
132
151

2

A bit long-winded, don't you think? – James Aug 20 '09 at 14:29
Thank you both very much! I was looking at the wrong function, stupid .index() – TD540 Aug 20 '09 at 14:32

score 1 · Answer 6 · answered Jan 11 '12 at 20:55

Here is a solution I created using tables. you can see how I used the selectors. Im sure it could be cleaner, but here you are:

    $('.showColumn').live('click',function() {
        var theEl = {{id of the element}};
        var setEl = $('th#' + theEl + '');
        var index = setEl.index(setEl.parentNode);
        $('table tr').each(function() { 
            $('th:eq(' + index + ')',this).show(); 
            $('td:eq(' + index + ')',this).show();
        });
    });

cheers.bo

Get parent index with jQuery

6 Answers6

Linked

Related