OK I solved it. Here's the complete working version.
$(document).ready(function() {
$("li.episode").each(function(){
var $this = $(this);
var image = $this.find('img');
var details = $this.find('.details');
$(this).hover(function(){
image.addClass("background");
details.addClass("show");
},function(){
image.removeClass("background");
details.removeClass("show");
});
});
});
On Feb 18, 2:47 pm, myjquery <ohn.aungmy...@gmail.com> wrote:
> 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");
> });
>
>
>
> });- Hide quoted text -
>
> - Show quoted text -
