CODEWITHSUNDEEP
javascriptjquery
David Allen
David Allen

Reputation: 1163

jQuery find column class

Please see my code below :

     <div class="grid_6 box a col1 row1" style="left: 231px; top: 380px; position: absolute; "></div>
     <div class="grid_6 box a col2 row1" style="left: 471px; top: 380px; position: absolute; "></div>
     <div class="grid_6 box a col3 row1" style="left: 711px; top: 380px; position: absolute; "></div>
     <div class="grid_6 box a col4 row1" style="left: 951px; top: 380px; position: absolute; "></div>
     <div class="grid_6 box b col1 row2" style="left: 231px; top: 540px; position: absolute; "></div>
     <div class="grid_6 box b col2 row2" style="left: 471px; top: 540px; position: absolute; "></div>
     <div class="grid_6 box b col3 row2" style="left: 711px; top: 540px; position: absolute; "></div>
     <div class="grid_6 box b col4 row2" style="left: 951px; top: 540px; position: absolute; "></div>

I need to make a jquery script which will figure out which col and which row i have clicked.

Can this be done easily?

Upvotes: 0

Views: 1254

Answers (3)

Giovanni Filardo
Giovanni Filardo

Reputation: 1022

I posted a solution on jsfiddle at this address: http://jsfiddle.net/6GBPF/3/

As you can see, the code is pretty simple and uses some basic regular expressions. (^|[^\w])row([0-9]+) basically means: take the sequence of one or more digits after the string row preceded by a character that is not a word character or the beginning of the string (in this case the class attribute), so that the row[0-9]+ class can be even at the beginning of the attribute. From the array result of the match function, the last element is the one you are looking for. The column works the same way.

$(document).ready(function(){
    $('.grid6').on('click', function(){
        var $div = $(this),
            rowMatch = $div.attr('class').match("(^|[^\w])row([0-9]+)"),
            row = rowMatch[rowMatch.length -1], 
            colMatch = $div.attr('class').match("(^|[^\w])col([0-9]+)"),
            col = colMatch[colMatch.length -1];
        alert("row: " + row + " - col: " + col);
    });
});

Given the fact that I don't know if you generate the markup you are working on and can't be sure that the class attribute will always have the same classes, the regular expression works even in the case where you have a class attribute like this: not_a_row1 row2 (the regular expression takes the second one (the right one)), in every order.

The other solution posted (var col_row = this.className.match(/col(\d+)\s+row(\d+)/);) makes the assumption that the class attribute will always have that exact structure. Even if less cautious, if you can be sure about that, that one is a very concise and expressive solution.

Upvotes: 1

OnResolve
OnResolve

Reputation: 4032

I'd suggest using the data- attributes since it will be easier to get the exact data you want. But, to get you the classes:

$('DIV').click(function(evnt){
    alert($(this).attr('class'));
});​

Upvotes: 0

user1106925
user1106925

Reputation:

Assuming your click handler is on the div...

var col_row = this.className.match(/col(\d+)\s+row(\d+)/);

The column will be at index 1, and the row at index 2.

var col = col_row[1],
    row = col_row[2];

FWIW, you cold do this in Firefox...

var [_, col, row] = this.className.match(/col(\d+)\s+row(\d+)/)

Upvotes: 3

Related Questions