I have a set HTML code that I am unable to modify.
My goal is to change the color of all bar-appointment elements to match the background-color of the preceding bar-something.
The HTML code I am working with is as follows:
<div class="bar-something"><div class="fn-label"> SOMETHING</div> </div>
<div class="bar-appointment"><div class="fn-label"> Ap1</div></div>
<div class="bar-appointment"><div class="fn-label"> Ap2</div></div>
<div class="bar-appointment"><div class="fn-label"> Ap3</div></div>
<div class="bar-something-else"><div class="fn-label"> SOMETHING</div></div>
<div class="bar-appointment"><div class="fn-label"> Ap1</div></div>
<div class="bar-appointment"><div class="fn-label"> Ap2</div></div>
<div class="bar-appointment"><div class="fn-label"> Ap3</div></div>
With the addition of jQuery:
$('.bar-appointment .fn-label').css('color',$('.bar-appointment').prev().children().css('background-color'))
However, this implementation only retrieves the background-color value from the first bar-something and applies it to the other elements. You can view the issue in this JSFIDDLE link.