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;
}

Open 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>

Open 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 );
    });
});

Open in new window



thanks in advance
badwolfffAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
You nearly had it - two things where you went wrong

1. Your use of closest was incorrect. Closest is used to find the closest matching item moving up the hierarchy.

http://api.jquery.com/closest/

2. You used background-color for your css selector instead of backgrounColor.

This should work for you
jQuery(function() {
  jQuery('span.cmsms_post_format_img').each(function() {
    var thisColour = jQuery(this).css('backgroundColor');

    // get the closest common parent
    var parent = jQuery(this).closest("div.cmsms_slider_post_cont");

    // Set the background colour using backgroundColor
    // by finding all header and footer elements that are contained within
    // the parent
    jQuery('header, footer', parent).css( "backgroundColor", thisColour );
  });
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
badwolfffAuthor Commented:
Ahhhhh! Clever! Great job. You won't believe how close I was as I nearly came to the conclusion myself that closest was looking in the wrong direction! Well we learn something every day... thanks
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.