How to get the index of a list of buttons in jquery

Question

I have a couple of buttons

<button id="btn-ok[1]" class="btn-ok"></button>
<button id="btn-failed[1]" class="btn-failed"></button>

<button id="btn-ok[2]" class="btn-ok"></button>
<button id="btn-failed[2]" class="btn-failed"></button>

<button id="btn-ok[3]" class="btn-ok"></button>
<button id="btn-failed[3]" class="btn-failed"></button>

And I am running differnt jquery functions for btn-ok and for btn-failed. I would like to use the index number of the id. How can I obtain it?

<script>
  $(document).ready(function() {
        $('#btn-ok').click(function() {
            console.log('I would like to print the index of the pressed button here. (i.e. 1,2,3)');
        });
  });

</script>

I've never seen css tags defined with [ ] as you did, and this seems wrong on so many levels. You should be instead binding events on class names. Besides that, that seems like an design error, you shouldn't be needing to obtain index etc. Why do you need index anyways? — Emirhan Özlen
– Emirhan Özlen, Commented Apr 10, 2017 at 21:26
I need the index because I need to perform different calls depending the button is pressed. Putting the [ ] was an attempt to deal with the situation. But as I see in the comments it is clearly a bad idea. Thank you for your answer. — mosh442
– mosh442, Commented Apr 10, 2017 at 21:32

gavgrif · Accepted Answer · 2017-04-10 21:44:41Z

Use html5's data attributes and separate the index and status into separate elements - I added some teext to each button so it could be easily seen and then the click grabs the data-attributes and console.logs the values.

$(document).ready(function() {
   $('.btn').click(function() {
     var index = $(this).data('index');
     var status = $(this).data('status')
    
     console.log(index + ' / ' + status);
  }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button data-index="1" data-status ="ok" class="btn btn-ok">1 Ok</button>
<button data-index="1" data-status ="failed"  class="btn btn-failed">1 Failed</button>

<button data-index="2" data-status ="ok" class="btn btn-ok">2 OK</button>
<button data-index="2" data-status ="failed" class="btn btn-failed">2 Failed</button>

<button  data-index="3" data-status ="ok" class="btn btn-ok">3 OK</button>
<button  data-index="3" data-status ="failed" class="btn btn-failed">3 Failed</button>

charlietfl · Accepted Answer · 2017-04-10 21:29:29Z

1

Create a collection of all those buttons to index against. Note that index() is zero based

var $buttons = $('.btn-ok, btn-failed').click(function(){
     alert($buttons.index(this));
})

Or for more specifc target:

var $buttons = $('.btn-ok, btn-failed');

$('#btn-ok\\[1\\]').click(function(){
     alert($buttons.index(this));
})

Or use data attributes instead of messing around with [] in ID

<button  class="btn-ok" data-index="1"></button>

..

$('.btn-ok').click(function(){
    alert($(this).data('index'));
})

edited Apr 10, 2017 at 21:29

answered Apr 10, 2017 at 21:24

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

Howel · Accepted Answer · 2017-04-10 21:37:36Z

1

HTML id's shouldn't use an index. Instead use a class to hold the selector and a data attribute to hold the other values you'll need like this:

The HTML:

<button class="btn-ok" data-index="1">Ok</button>

The JS:

$('.btn-ok').click(function() {
   $(this).data('index');
});

The fiddle: https://jsfiddle.net/kLvqe8dw/2/

answered Apr 10, 2017 at 21:37

Howel

2182 silver badges9 bronze badges

Comments

Jordan Georgiadis · Accepted Answer · 2017-04-10 21:30:27Z

0

did you mean to get id ?

$("button").click(function(){
    alert($(this).attr('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn-ok[1]" class="btn-ok">ok[1]</button>
<button id="btn-failed[1]" class="btn-failed">failed[1]</button>

<button id="btn-ok[2]" class="btn-ok">ok[2]</button>
<button id="btn-failed[2]" class="btn-failed">failed[2]</button>

<button id="btn-ok[3]" class="btn-ok">ok[3]</button>
<button id="btn-failed[3]" class="btn-failed">failed[3]</button>

answered Apr 10, 2017 at 21:30

Jordan Georgiadis

3312 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to get the index of a list of buttons in jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related