ToddT ToddT - 1 month ago 7
Javascript Question

Get index of li with button click

Using JQuery I'd like to get the index of the current

li
that I'm on when I click the
button
in the
tabpanel
residing in this list of BootStrap tabs.

<ul id="mytabs" class="nav nav-pills nav-wizard pill-font"
role="tablist" data-tabs="tabs">
<li role="presentation" class="active"><a href="#start"
data-toggle="tab">Before We Start</a></li>
<li role="presentation"><a href="#setup" aria-controls="setup"
role="tab">Setup</a></li>
<li role="presentation"><a href="#signup" aria-controls="Signing Up"
role="tab">Signing Up</a></li>
<li role="presentation"><a href="#speed" role="tab">Shipping Speeds</a</li>
<li role="presentation"><a href="#fulfill" role="tab">Fulfillment</a></li>
<li role="presentation"><a href="#product"
role="tab">Products</a></li>
</ul>


I'm going to be using a counter in the button within each
tabpanel
so I can go forward and back. This is my JQuery without the counter..

$(document).ready(function(){
$(":button").click(function(e){
e.preventDefault();
$('#mytabs li:eq(2) a').tab('show');
});
});


Right now it just has the index
2
but if I can find the index of the current
li
I'll be able to add and subtract from it to get the
li
I want.

I tried with
this
but that just returns the
index
of the button, which isn't what I want.




Thanks everyone, a mish mash of everyone's answer turned into this:

$(document).ready(function(){
$(":button").click(function(e){
e.preventDefault();
var index = $(this).parent().index();
var length = $('#mytabs li a').length
alert(length);
index=index+1;
$('#mytabs li:eq('+index+') a').tab('show');
});
});

Answer

Try this:

$(document).ready(function(){
    $(":button").click(function(e){
        e.preventDefault();
        var index = $(this).parent().index();
        $('#mytabs li:eq(index) a').tab('show');
    });
});