Getting a elements position in a grid divided by 4

Question

I have a grid of let's say 12 cards, 4 columns and 3 rows. Every column has a different class. Column 1: has class a. Column 2: has class b and so on c and d.

If I loop through all cards with the class of a, I can know their row position because jquery's for each has an index.

My problem is when someone clicks a card let's say column b row 2 how can we get the index then, I know it's in column 2 because it has a class of b, but how do I know which row it is?

What I need is a math function that I can pass in let's say 7 (if the 7th card was pressed) and it will return 2 (because it's in the second row) , and for 10 it will return 3.

I used for an example 12 cards but this math function should return for any amount of cards.

Add a new, common class to every card. Add an event handler to that class. Get the card's index and do some [modulo math](http://stackoverflow.com/questions/8900652/what-does-do-in-javascript) in the handler. — Blazemonger, Nov 19 '14 at 15:42

score 1 · Answer 1 · answered Nov 19 '14 at 15:46

In your event handler, get the index idx of the card, then call something like this:

var rows = 3, cols = 4;
function getCoords(idx,rows,cols) {
    var rowval = Math.floor(idx/rows),
        colval = idx % cols; // modulo
    return [rowval,colval]; // ordered array
};

Don't forget that idx starts counting at zero, not one, so the 7th card should have idx=6.

HoangHieu · Answer 2 · 2014-11-19T15:56:01.523

0

try this solution: javascript allow thread function :) ...

You have array of class or id, you loop to get class or id and use example.

 for(var key in Alerts){
        (function(key){                
             $("#"+key).on("click",function(){
                   alert(key);
             });
        })(key);
    }

this example. should you use this for your code :), My code very example, When you know how to store key in loop, you can see your problem so easy..

example: http://jsfiddle.net/v0Lhtwpe/2/

edited Nov 19 '14 at 15:56

answered Nov 19 '14 at 15:38

HoangHieu

2,654
2
24
41

1

I don't think this actually answers the question. – Blazemonger Nov 19 '14 at 15:48

score 0 · Accepted Answer · answered Nov 19 '14 at 18:23

So lets assume that all cards have a class .card if not you should definitely add 1 here's what you'd do and you can do that either with jQuery or with JavaScript

//Now first you want to create a variable of how many cards per row
//in this example we will set it manually to 4.
var cardsInRow = 4;
//function that calculates row position
function getCardRow () {
    //this will be the card clicked on
    //To use if jquery is enabled
    var index = $('.card').index(this);
    //to use if you want vanilla, and we will use a javascript array function
    //bind the .card query to use as this
    //now it will return the index of the card in the query as if it was an array.
    var index = [].indexOf.call(document.getElementsByClassName('card'), this);

    //now we add one to index since it's 0 based and return the row number   
    alert( Math.ceil( ++index / 4 ) );
}
//you can use javascript to do the click event
$('.card').on('click', getCardRow);
//or use javascript
var i = 0,
    cards = document.getElementsByClassName('card'),
    len = cards.length;

for (i = 0; i<len; i++) {
    cards[i].onclick = getCardRow
}

Getting a elements position in a grid divided by 4

3 Answers3