Question

I want to add a hover on the first 24 childs that adds a fill on the 24 seperate elements of an other element.

Like so:

$('tr td:nth-child(1)').mouseover(function(){
  $('rect:nth-of-type(1)').css("fill", "black" );
});

$('tr td:nth-child(2)').mouseover(function(){  
  $('rect:nth-of-type(2)').css("fill", "black" );
});

$('tr td:nth-child(3)').mouseover(function(){
  $('rect:nth-of-type(3)').css("fill", "black" );
});

But i don’t want to repeat myself 24 times. Whats the best way to handle this?

Answer 1

$('tr td:lt(24)').mouseenter(function(){

   var index = $(this).index();
   $('rect').eq( index ).css("fill","black");

});

IF you don’t have more than 24 elements than you don’t need the :lt() selector

Holy bible

You can also use the JS method .slice() like:

$('tr td').slice(0,24)

You can also target the desired element using .eq() ( or :eq()-selector ) and than go for a collection of previous elements using .prevAll()

$('tr td:eq(24)').prevAll()

Always be as much specific as you can with your target elements selectors using #ID