jquery: set variable based on one class from an element that has more than one class

Question

Hi

I'm trying to make a table who's columns and rows highlight on hover (I realise there are jquery plugins out there that will do this, but I'm trying to learn, so thought I'd have a stab at doing it for myself.)

Here's what I've got so far:

$('th:not(.features), td:not(.features)').hover(highlight);

 function highlight(){
     $('th.highlightCol, td.highlightCol').removeClass('highlightCol');
     var col = $(this).attr('class');
     $('.' + col).addClass('highlightCol');
 };

 $('tr').hover(highlightRowOn, highlightRowOff);

 function highlightRowOn(){
     $(this).children('td:not(.highlightCol)').addClass('highlightRow');
 };

 function highlightRowOff(){
     $(this).children('td:not(.highlightCol)').removeClass('highlightRow');
 };

This works fine apart from one problem:
Each 'td' has a class specific to it's column (package1, package2, package3, package4). It is this that gets passed to the variable (col) to add the class 'highlightCol' to a column when one of its 'td's are hovered on.

However, If you move the cursor to a new column along a highlighted row, the 'td' you land on has two classes (highlightedRow and package* ). These both get passed to the variable and as a result the new column does not receive the correct class to highlight.

Is there a way for me to target just the 'package* ' class and pass that to the variable while ignoring the 'highlightedRow' class?

I hope that's not too jumbled for someone to make sense of and many thanks for any help offered.

Answer 1

Is there a way for me to target just the 'package* ' class and pass that to the variable while ignoring the 'highlightedRow' class?

Yep, using good ol' fashioned DOM. Since you are learning, I won't give out the solution explicitly.

The easiest way is to get the HTMLElement from jQuery: $('.selector').get(0) returns the first matched element. Then use the element's className property to get what you want.

Also, this selector may be of some use.

Answer 2

Thanks for the help... finally figured it out. Here's the code for those that are interested.

$('th:not(.features), td:not(.features)').hover(highlight, remove);

function highlight(){
    $(this).removeClass('highlightRow');
    var col = $(this).attr('class');
    $('.' + col).addClass('highlightCol');
};

function remove (){
    $('th.highlightCol, td.highlightCol').removeClass('highlightCol');
    $(this).addClass('highlightRow');
};

$('tr').hover(highlightRowOn, highlightRowOff);

function highlightRowOn(){
    $(this).children('td:not(.highlightCol), th:not(.highlightCol)').addClass('highlightRow');
};

function highlightRowOff(){
    $(this).children('td:not(.highlightCol), th:not(.highlightCol)').removeClass('highlightRow');
};