Change class background on hover

Question

I have table with multiple elements with class like 'rok0', 'rok1', 'rok2' etc. and I want to change background of all elements with same class when hover on any of them. I got this function:

$(function() {
  $('.rok1').hover(function() {
    $('.rok1').css('background-color', 'yellow');
  }, function() {
    $('.rok1').css('background-color', '');
  });
});

This function is working, but i would like to use it for all the classes, so I want to use for cycle on it but somehow it doesn't work.

I tried this:

$(function() {
  for (i = 0; i < 20; i++) { 
    console.log('.rok'+i);
    $('.rok'+i).hover(function() {
      $('.rok'+i).css('background-color', 'yellow');
    }, function() {
      $('.rok'+i).css('background-color', '');
    });
  }
});

and this:

for (i = 0; i < 20; i++) { 
  $(function() {
    console.log('.rok'+i);
    $('.rok'+i).hover(function() {
      $('.rok'+i).css('background-color', 'yellow');
    }, function() {
      $('.rok'+i).css('background-color', '');
    });
  }); 
}

None of them was working, I have no idea why, can you help me?

Edit: Example of my table:

<table>
<tr>
<th class='rok0'>Col11</th>
<th class='rok1'>Col21</th>
<th class='rok2'>Col31</th>
</tr>
<tr>
<th class='rok0'>Col12</th>
<th class='rok1'>Col22</th>
<th class='rok2'>Col32</th>
</tr>
<tr>
<td class='rok0'>Col13</td>
<td class='rok1'>Col23</td>
<td class='rok2'>Col33</td>
</tr>
</table>

And I want to set background of all element with the SAME class when I hover over one of them.

Answer 1

You can make use of startsWith css attribute in jquery and add classes accordingly without any looping.

$(function() {
  $('[class^="rok"]').hover(function() {
    $('[class^="rok"]').css('background-color', 'yellow');
  }, function() {
    // on mouseout, reset the background colour
    $('[class^="rok"]').css('background-color', '');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rok1">
  Rok1
</div>

<div class="rok2">
  Rok2
</div>

<div class="rok3">
  Rok3
</div>

Update

Here's how you can do for same class with startswith css selector.

var currClass;

$(function() {
  $('[class^="rok"]').hover(function() {
    currClass = $(this).attr('class');
    $('.' + currClass).css('background-color', 'yellow');
  }, function() {
    currClass = $(this).attr('class');
    // on mouseout, reset the background colour
    $('.' + currClass).css('background-color', '');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th class='rok0'>Col11</th>
    <th class='rok1'>Col21</th>
    <th class='rok2'>Col31</th>
  </tr>
  <tr>
    <th class='rok0'>Col12</th>
    <th class='rok1'>Col22</th>
    <th class='rok2'>Col32</th>
  </tr>
  <tr>
    <td class='rok0'>Col13</td>
    <td class='rok1'>Col23</td>
    <td class='rok2'>Col33</td>
  </tr>
</table>

Answer 2

Do not use incremental id or class attributes. They are an anti-pattern which leads to more complex code that's harder to maintain for absolutely no benefit.

Given the JS/HTML sample in the question it would appear that you are attempting to highlight the cells of the column on hover. As such you can use the index() of the elements along with the :nth-child selector to make this work in a far more reliable and extensible manner:

$('table th, table td').hover(function() {
  var index = $(this).index() + 1;
  $(`table tr th:nth-child(${index}), table td:nth-child(${index})`).toggleClass('highlight');
});

table {
  border-collapse: collapse;
}
td {
  padding: 5px;
}
.highlight {
  background-color: #CCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Col11</th>
    <th>Col21</th>
    <th>Col31</th>
  </tr>
  <tr>
    <th>Col12</th>
    <th>Col22</th>
    <th>Col32</th>
  </tr>
  <tr>
    <td>Col13</td>
    <td>Col23</td>
    <td>Col33</td>
  </tr>
  <tr>
    <td>Col14</td>
    <td>Col24</td>
    <td>Col34</td>
  </tr>
  <tr>
    <td>Col15</td>
    <td>Col25</td>
    <td>Col35</td>
  </tr>
</table>

Answer 3

First give same class to all your elements

For eg:

   $('.newClassHere').hover(function(){
    $($(this).attr('class').split(' ')).each(function() { 
        if (this !== '') {
            classes[this] = this;
        }    
    }); 
      classes.forEach(function(element){
        if(element.substring(0, 3) === 'rok')
           var number = element.substring(3,4);
      });
});

Var number will capture the number you have in your class name for eg: rok1 will give you 1.

$(function() {
        $('.rok' + number).hover(function() {
          $('.rok' + number).css('background-color', 'yellow');
        }, function() {
          // on mouseout, reset the background colour
          $('.rok' + number).css('background-color', '');
        });
 });

Answer 4

Try something like this :

$(function() {
  var color = "";
  $('div[class^="rok"]').hover(function() {
    color = $(this).css('background-color');
    $(this).css('background-color', 'yellow');
  }, function() {
    $(this).css('background-color', color);
  });
});

Demo

$(function() {
  var color = "";
  $('div[class^="rok"]').hover(function() {
    color = $(this).css('background-color');
    $(this).css('background-color', 'yellow');
  }, function() {
    $(this).css('background-color', color);
  });
});

div[class^='rok'] {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin: 10px;
}

.rok2 {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rok1"></div>
<div class="rok2"></div>
<div class="rok3"></div>
<div class="rok4"></div>