Question

Say that I have three “button” elements in one parent “div”. Assuming that these buttons could be labeled 1, 2, 3 or 0, 1, 2, using jQuery, is there an easy way to determine the number of which button is clicked?

Here’s the HTML:

<div class="table-tabs">
    <button class="tab1 selected">Description</button>
    <button class="tab2">Monitoring</button>
    <button class="tab3">Change Logs</button>
</div>

I would like to know the number so that I can activate the appropriate table when a button is pressed.

Answer 1

You can use .index() to get the number of the button (staring at 0).

$('.table-tabs button').click(function(){
    console.log($(this).index('.table-tabs button'));
});

DEMO: http://jsfiddle.net/UPKgm/

Or, you can parse the class and get the tab number, but that takes more work.

$('.table-tabs button').click(function() {
    var classes = $(this).attr('class').split(' '),
        tabID;
    $.each(classes, function() {
        if (this.indexOf('tab') === 0) {
            tabID = this.replace('tab', '');
            return false;
        }
    });
    console.log(tabID);
});

DEMO: http://jsfiddle.net/UPKgm/1/