Get index on click with jquery

Question

I am trying to develop a 2 player checkers game, for my college, but I am stuck at getting the index of the 2D array when I click on the piece.

I divided my HTML code in:

table - the game board
row - each row is the height of the array
cell - each cell is a piece and the width of the array

Then I setted a default array to start the game:

  var board = [
    [0, 1, 0, 1, 0, 1, 0, 1],
    [1, 0, 1, 0, 1, 0, 1, 0],
    [0, 1, 0, 1, 0, 1, 0, 1],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [2, 0, 2, 0, 2, 0, 2, 0],
    [0, 2, 0, 2, 0, 2, 0, 2],
    [2, 0, 2, 0, 2, 0, 2, 0],
  ];

Where the: - 0 - empty cell - 1 - Player 1 pieces - 2 - Player 2 pieces

To get the position I am using this code

function getPosition() {
  $('.row').on('click', function() {
    console.log( $('.row').index(this) );
  });
  $('.cell').on('click', function() {
    console.log( $('.cell').index(this) );
  });
}

Get the height array position which should be between 0 and 7 are ok, but the cell from the row should be between 0 and 7 too, but using this I am getting from 0 to 63, using this parameters I have no idea how to start the next comparisons of the game.

Here is the code from codepen http://codepen.io/michaelthompson/pen/jVdrav

change to console.log( $('.cell', this.parentElement).index(this) ); to get the index within the current row — Jaromanda X
– Jaromanda X, Commented Dec 18, 2016 at 23:04

charlietfl · Accepted Answer · 2016-12-18 23:42:22Z

4

In each instance you can simply use $(this).index() which will return the index within the element's siblings

But since clicking on a row always means clicking a cell you could combine them and do

$('.cell').on('click', function() {
   var $cell = $(this),  
       columnIndex = $cell.index(),
       rowIndex = $cell.parent().index();
});

What $('.cell').index(this) is doing is taking the whole collection of the class within the page and that's why you are getting 0-63

edited Dec 18, 2016 at 23:42

answered Dec 18, 2016 at 23:11

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

1 Comment

charlietfl Over a year ago

Did this answer help you? If so, feel free to accept it

Collectives™ on Stack Overflow

Get index on click with jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related