How do I assign a background colour to closest items (by selector) based on a certain element's background colour?

This is my HTML code:

Note: this is just for the example, but every span.cmsms_post_format_img has a different bg assigened automatically.
span.cmsms_post_format_img{
    background-color:#ff0080;
}

Select allOpen in new window

<div class="cmsms_slider_post_cont">

    <span class="cmsms_post_format_img  cmsms_theme_icon_desktop">
    	<abbr title="07/06/2015" class="published cmsms_slider_post_date"><span class="cmsms_day">07</span><span class="cmsms_mon">giu</span></abbr><abbr title="21/06/2015" class="dn date updated">21/06/2015</abbr>
    </span>
    
	<figure class="cmsms_img_rollover_wrap preloader"><img height="490" width="820" title="Evento Polisportiva Stella" alt="Evento Polisportiva Stella" class="full-width wp-post-image" src="http://demo.missionfamily.org/content/immagini/galleria_eventi/2015-06-07_Evento_Stella/MF_Evento_Stella_3-820x490.jpg">
    	<div class="cmsms_img_rollover">
        	<a class="cmsms_open_post_link" title="Evento Polisportiva Stella" href="http://demo.missionfamily.org/content/evento-polisportiva-stella/"></a>
		</div>
	</figure>
    
    <div class="cmsms_slider_post_cont_wrap cmsms_post_format_img">
    	<header class="cmsms_slider_post_header entry-header">
        	<h4 class="cmsms_slider_post_title entry-title">
            	<a href="http://demo.missionfamily.org/content/evento-polisportiva-stella/">Evento Polisportiva Stella</a>
			</h4>
		</header>
        
        <div class="cmsms_slider_post_cont_info entry-meta">
        	<span class="cmsms_slider_post_category">In
            	<a rel="category tag" href="http://demo.missionfamily.org/content/category/galleria-eventi/">Galleria Eventi</a>
            </span>
		</div>
        
        <footer class="cmsms_slider_post_footer entry-meta">
        	<div class="cmsms_slider_post_meta_info">
            	<a class="cmsmsLike cmsms_theme_icon_heart" id="cmsmsLike-3035" onclick="cmsmsLike(3035); return false;" href="#"><span>0</span></a>
                <a title="Commentare Evento Polisportiva Stella" href="http://demo.missionfamily.org/content/evento-polisportiva-stella/#comments" class="cmsms_slider_post_comments cmsms_theme_icon_comment">0</a>
			</div>
		</footer>
	</div>
    
</div>

Select allOpen in new window

This type of code repeats itself several times one after the other (on the basis of the number of items in my slider).

So if I have 5 items in the slider, I will have this code repeat 5 times, and each time the span.cmsms_post_format_img will have a different background colour.

For each span.cmsms_post_format_img I would like to get the background color value and apply the same to the immediately following:
- div.cmsms_slider_post_cont_wrap header
- div.cmsms_slider_post_cont_wrap footer

How could I achieve this using jQuery?

I tried using the following code but it does not do anything:

jQuery( document ).ready(function() {
    jQuery("span.cmsms_theme_icon_desktop").each(function() {
        var thisColour = jQuery(this).css('backgroundColor');
        jQuery(this).closest("div.cmsms_slider_post_cont_wrap header, div.cmsms_slider_post_cont_wrap footer").css( "background-color", thisColour );
    });
});

Select allOpen in new window

thanks in advance