I found one solution. But the code is bloated. I need to put it in a
loop.

Here 3 is the maximum li numbers. How can i put it in a loop? Thanks

$(document).ready(function() {

   $("li.episode:nth-child(3n+0)").hover(function ()  {
      this>$('li.episode:nth-child(3n+0) img').addClass("background");
      this>$('li.episode:nth-child(3n+0) .details').addClass("show");
   },function ()  {
      this>$('li.episode:nth-child(3n+0) img').removeClass
("background");
      this>$('li.episode:nth-child(3n+0) .details').removeClass
("show");
   });
   $("li.episode:nth-child(3n+1)").hover(function ()  {
      this>$('li.episode:nth-child(3n+1) img').addClass("background");
      this>$('li.episode:nth-child(3n+1) .details').addClass("show");
   },function ()  {
      this>$('li.episode:nth-child(3n+1) img').removeClass
("background");
      this>$('li.episode:nth-child(3n+1) .details').removeClass
("show");
   });
   $("li.episode:nth-child(3n+2)").hover(function ()  {
      this>$('li.episode:nth-child(3n+2) img').addClass("background");
      this>$('li.episode:nth-child(3n+2) .details').addClass("show");
   },function ()  {
      this>$('li.episode:nth-child(3n+2) img').removeClass
("background");
      this>$('li.episode:nth-child(3n+2) .details').removeClass
("show");
   });

});

Reply via email to