Question

In my code I have to divs with different names, except the last part of the names that’s the same (successMessage). When the div(s) appears in the code below is executed removing the div(s) after 1 second.

Of course, this is a good example of DRY because the functions is the same except for the name of the divs. So, what is the easiest way to merge these functions to one that affects both divs?

Thanks in advance!

    if ($('#MainContent_MovieEdit_MovieGenreEdit1_successMessage').length > 0) {
        setTimeout(function () {
            $('#MainContent_MovieEdit_MovieGenreEdit1_successMessage').fadeOut('slow');
        }, 1000);
    };

    if ($('#MainContent_MovieEdit_successMessage').length > 0) {
        setTimeout(function () {
            $('#MainContent_MovieEdit_successMessage').fadeOut('slow');
        }, 1000);
    };

Answer 1

$('#MainContent_MovieEdit_successMessage, #MainContent_MovieEdit_MovieGenreEdit1_successMessage')
 .delay(1000).fadeOut('slow');

There is no need for the if statement, if jQuery couldn’t find the elements, nothing will happen. The multiple selector ^[docs] will select both elements and .delay() ^[docs] offers a nice way to defer the execution of fadeOut.

Another possible selector would be the attribute starts with selector ^[docs]:

$('div[id^="MainContent_MovieEdit_"]')

assuming the elements are div elements. Of course you can also wrap this in a function if you really wanted to:

function fadeOut($elements) {
    $elements.delay(1000).fadeOut('slow');
}

fadeOut($('div[id^="MainContent_MovieEdit_"]'));