I have many <spans>s which need to group to change opacity after hover.  All of them need to have unique IDs.  Is there a way to combine all these hover functions to one function?jQuery//09        $('#c_09_241a, #c_09_241b, #c_09_241c, #c_09_241d').hover(        function() {            $('#c_09_241a, #c_09_241b, #c_09_241c, #c_09_241d').stop(true, true).css('opacity','1');        },        function() {             $('#c_09_241a, #c_09_241b, #c_09_241c, #c_09_241d').stop(true, true).css('opacity','0');    });     $('#c_09_242a, #c_09_242b').hover(        function() {            $('#c_09_242a, #c_09_242b').stop(true, true).css('opacity','1');        },        function() {             $('#c_09_242a, #c_09_242b').stop(true, true).css('opacity','0');    });    $('#c_09_245a, #c_09_245b').hover(        function() {            $('#c_09_245a, #c_09_245b').stop(true, true).css('opacity','1');        },        function() {             $('#c_09_245a, #c_09_245b').stop(true, true).css('opacity','0');    });    $('#c_09_246a, #c_09_246b').hover(        function() {            $('#c_09_246a, #c_09_246b').stop(true, true).css('opacity','1');        },        function() {             $('#c_09_246a, #c_09_246b').stop(true, true).css('opacity','0');    });    //08        $('#c_08_235a, #c_08_235b, #c_08_235c, #c_08_235d').hover(        function() {            $('#c_08_235a, #c_08_235b, #c_08_235c, #c_08_235d').stop(true, true).css('opacity','1');        },        function() {             $('#c_08_235a, #c_08_235b, #c_08_235c, #c_08_235d').stop(true, true).css('opacity','0');    });     $('#c_08_236a, #c_08_236b').hover(        function() {            $('#c_08_236a, #c_08_236b').stop(true, true).css('opacity','1');        },        function() {             $('#c_08_236a, #c_08_236b').stop(true, true).css('opacity','0');    });    $('#c_08_239a, #c_08_239b').hover(        function() {            $('#c_08_239a, #c_08_239b').stop(true, true).css('opacity','1');        },        function() {             $('#c_08_239a, #c_08_239b').stop(true, true).css('opacity','0');    });    $('#c_08_240a, #c_08_240b').hover(        function() {            $('#c_08_240a, #c_08_240b').stop(true, true).css('opacity','1');        },        function() {             $('#c_08_240a, #c_08_240b').stop(true, true).css('opacity','0');    });    //07        $('#c_07_227a, #c_07_227b').hover(        function() {            $('#c_07_227a, #c_07_227b').stop(true, true).css('opacity','1');        },        function() {             $('#c_07_227a, #c_07_227b').stop(true, true).css('opacity','0');    });    $('#c_07_228a, #c_07_228b, #c_07_228c').hover(        function() {            $('#c_07_228a, #c_07_228b, #c_07_228c').stop(true, true).css('opacity','1');        },        function() {             $('#c_07_228a, #c_07_228b, #c_07_228c').stop(true, true).css('opacity','0');    });    $('#c_07_007a, #c_07_007b').hover(        function() {            $('#c_07_007a, #c_07_007b').stop(true, true).css('opacity','1');        },        function() {             $('#c_07_007a, #c_07_007b').stop(true, true).css('opacity','0');    });    $('#c_07_008a, #c_07_008b').hover(        function() {            $('#c_07_008a, #c_07_008b').stop(true, true).css('opacity','1');        },        function() {             $('#c_07_008a, #c_07_008b').stop(true, true).css('opacity','0');    });HTML<div id=rzuty09p class=rzuty>            <span id=c_09_241a class=mieszkanie title=></span>            <span id=c_09_241b class=mieszkanie title=></span>            <span id=c_09_241c class=mieszkanie title=></span>            <span id=c_09_241d class=mieszkanie title=></span>            <span id=c_09_242a class=mieszkanie title=></span>            <span id=c_09_242b class=mieszkanie title=></span>            <span id=c_09_243 class=mieszkanie title=></span>            <span id=c_09_244 class=mieszkanie title=></span>            <span id=c_09_245a class=mieszkanie title=></span>            <span id=c_09_245b class=mieszkanie title=></span>            <span id=c_09_246a class=mieszkanie nie title=></span>            <span id=c_09_246b class=mieszkanie nie title=></span>        </div>  <div id=rzuty08p class=rzuty>            <span id=c_08_235a class=mieszkanie title=></span>            <span id=c_08_235b class=mieszkanie title=></span>            <span id=c_08_235c class=mieszkanie title=></span>            <span id=c_08_235d class=mieszkanie title=></span>            <span id=c_08_236a class=mieszkanie nie title=></span>            <span id=c_08_236b class=mieszkanie nie title=></span>            <span id=c_08_237 class=mieszkanie title=></span>            <span id=c_08_238 class=mieszkanie title=></span>            <span id=c_08_239a class=mieszkanie title=></span>            <span id=c_08_239b class=mieszkanie title=></span>            <span id=c_08_240a class=mieszkanie title=></span>            <span id=c_08_240b class=mieszkanie title=></span>        </div>      <div id=rzuty07p class=rzuty>            <span id=c_07_226 class=mieszkanie title=></span>            <span id=c_07_227a class=mieszkanie title=></span>            <span id=c_07_227b class=mieszkanie title=></span>            <span id=c_07_228a class=mieszkanie title=></span>            <span id=c_07_228b class=mieszkanie title=></span>            <span id=c_07_228c class=mieszkanie title=></span>            <span id=c_07_229 class=mieszkanie nie title=></span>            <span id=c_07_005 class=mieszkanie title=></span>            <span id=c_07_006 class=mieszkanie title=></span>            <span id=c_07_007a class=mieszkanie nie title=></span>            <span id=c_07_007b class=mieszkanie nie title=></span>            <span id=c_07_008a class=mieszkanie title=></span>            <span id=c_07_008b class=mieszkanie title=></span>        </div>
Combining hover functions
javascript;jquery
var groups = [    '09_241', '09_242', '09_245', '09_246',    '08_235', '08_236', '08_239', '08_240',    '07_227', '07_228', '07_007', '07_008'];$.each(groups, function(i, group) {    var $group = $('[id^=c_' + group + ']');    $group.hover(function() {        $group.stop(true, true).css('opacity', '1');    }, function() {        $group.stop(true, true).css('opacity', '0');    });});Here's the fiddle: http://jsfiddle.net/W8GA3/This is similar to @Matt's solution, with the following key differences:Sane Selectors - There's no need to add all those selectors by hand. Simply use an attribute selector to select all elements that start with a given string.Selector caching - If there's one thing you can do to your code to keep it fast, it's selector caching.$.each - We're using jQuery's each helper to loop through the array, since it also supports older browsers (forEach is not supported in IE < 9).If you want to, you could even build that original groups array dynamically, which will make this much easier to maintain:var groups = [];$('[id^=c_]').each(function() {    // Extract group number from ID    var group = this.id.substring(2, 8);    // If the ID is not in the groups array, add it    ~$.inArray( group, groups ) || groups.push( group );});Here's the fiddle: http://jsfiddle.net/W8GA3/1/