shorthand in jquery

Question

I have this jquery codes:

 $(document).ready(function() {
$("#masthead ul li").mouseover(function(){
    $("#masthead ul li").removeClass("cr");
    $(this).toggleClass("cr");
});
   }); 

  $(document).ready(function() {
$("#intUl li").mouseover(function(){
    $("#intUl li").removeClass("cr");
    $(this).toggleClass("cr");
});
}); 

Can we write shorthand for two similar jquery code? Thanks in advance

Answer 1

$('#masthead ul li, #intUL li').mouseover(function() {
    $(this).siblings().removeClass("cr");
    $(this).toggleClass("cr");  
});

Does the same as the original code; not sure why you're removing a class only to readd it, however. If you're trying to get it to flash or something, I'm fairly sure it won't work as you're expecting.

Misunderstood original intent; a commenter clarified for me, and I fixed it :)

Answer 2

function toggleCRClass(event) {
    $(event.target).siblings().removeClass('cr');
    $(event.target).addClass('cr');
}

$(document).ready(function() {
    $("#masthead ul li, #intUl li").mouseover(toggleCRClass);
}); 

Answer 3

Try this:

 $(document).ready(function() {
    $("#masthead ul li, #intUl li").mouseover(function(){
        $(this).removeClass("cr");
        $(this).toggleClass("cr");
    });
 });