Shortcut in jquery

Question

I have these 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 I write a shorthand for two similar jquery codes? thanks in advance

Answer 1

Try the following:

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

Answer 2

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

It has the same meaning as the source code; not sure why you are deleting a read-only class. If you are trying to make it flare up or something else, I am sure that it will not work as you expect.

Unknown initial intention; the commenter clarified for me and I fixed it :)

Answer 3

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

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

Answer 4

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