make function shorter

[UD2006]

I have the following JQuery code (working), but I would like to know if it can be shorter and if so, how?

$(function(){
  $('.blok').mouseenter(function(){
    $(this).find('#message-1').show();
  }).mouseleave(function(){
    $(this).find('#message-1').hide();
  });
  $('.blok').mouseenter(function(){
    $(this).find('#message-2').show();
  }).mouseleave(function(){
    $(this).find('#message-2').hide();
  });
  $('.blok').mouseenter(function(){
    $(this).find('#message-3').show();
  }).mouseleave(function(){
    $(this).find('#message-3').hide();
  });
  $('.blok').mouseenter(function(){
    $(this).find('#message-4').show();
  }).mouseleave(function(){
    $(this).find('#message-4').hide();
  });
  $('.blok').mouseenter(function(){
    $(this).find('#message-5').show();
  }).mouseleave(function(){
    $(this).find('#message-5').hide();
  });
  $('.blok').mouseenter(function(){
    $(this).find('#message-6').show();
  }).mouseleave(function(){
    $(this).find('#message-6').hide();
  });
  $('.blok').mouseenter(function(){
    $(this).find('#message-7').show();
  }).mouseleave(function(){
    $(this).find('#message-7').hide();
  });
  $('.blok').mouseenter(function(){
    $(this).find('#message-8').show();
  }).mouseleave(function(){
    $(this).find('#message-8').hide();
  });
  $('.blok').mouseenter(function(){
    $(this).find('#message-9').show();
  }).mouseleave(function(){
    $(this).find('#message-9').hide();
  });
  $('.blok').mouseenter(function(){
    $(this).find('#message-10').show();
  }).mouseleave(function(){
    $(this).find('#message-10').hide();
  });
  $('.blok').mouseenter(function(){
    $(this).find('#message-11').show();
  }).mouseleave(function(){
    $(this).find('#message-11').hide();
  });
  $('.blok').mouseenter(function(){
    $(this).find('#message-12').show();
  }).mouseleave(function(){
    $(this).find('#message-12').hide();
  });
});

The message-#(numbers) are div's.

Thanks

[VIPStephan]

Hell yeah, this can be made shorter. But it would help to see your HTML in order to suggest a more generic traversal method.

The first thing that comes to my mind right now would be:

 $('.blok').mouseenter(function(){
   $(this).find('[id*=message]').show();
 }).mouseleave(function(){
   $(this).find('[id*=message]').hide();
 });

That’s the “contains” selector; alternatively you could use the “starts with” selector: [id^=message] or the “contains prefix” selector (string separated by hyphens): [id|=message]

[Mishu]

Originally Posted by UD2006

I have the following JQuery code (working), but I would like to know if it can be shorter and if so, how?

Do you mean just shorter jquery code or shortening the total actual javascript that your jquery runs in the background?

Sometimes newbies get excited because they can do something with just 1 or 2 lines of jquery without realising that the jquery could be running 50, 100 or 100's of lines of javascript in the background to do that thing.

If you code the task using plain javascript then 99.99% of the times that will be the shortest actually run code.

[UD2006]

Originally Posted by VIPStephan

Hell yeah, this can be made shorter. But it would help to see your HTML in order to suggest a more generic traversal method.

The first thing that comes to my mind right now would be:

 $('.blok').mouseenter(function(){
   $(this).find('[id*=message]').show();
 }).mouseleave(function(){
   $(this).find('[id*=message]').hide();
 });

That’s the “contains” selector; alternatively you could use the “starts with” selector: [id^=message] or the “contains prefix” selector (string separated by hyphens): [id|=message]

Thanks, that did it.