use .prev() to set current element css

Question

I've got pre-created HTML which I cannot edit.
What I am trying to do is get the color of all the bar-appointment to be the same as the previous bar-something background-color

I've got the following HTML

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

And jquery

$('.bar-appointment .fn-label').css('color',$('.bar-appointment').prev().children().css('background-color'))

It's not fully working as it only picks the first bar-something and applies it to the rest. Please see the following JSFIDDLE

Side note: `.prev()` will only include the immediate sibling before the current element. It does not continue searching if that sibling does not match the selector. [Efficient, concise way to find next matching sibling?](http://stackoverflow.com/questions/4933236/efficient-concise-way-to-find-next-matching-sibling) — Jonathan Lonowski, Aug 11 '15 at 02:31
I am not sure if it is a typo but you are trying to set the text color ?? — joyBlanks, Aug 11 '15 at 02:31
then why not `$('.bar-appointment .fn-label').css('color',$('.bar-something .fn-label').css('background-color'))` — joyBlanks, Aug 11 '15 at 02:37
@joyBlanks because the class `bar-something` is always different — Pindo, Aug 11 '15 at 02:39

score 3 · Accepted Answer · edited Aug 11 '15 at 02:42

3

Try

$('.bar-appointment').each(function(){
        $(this).find('.fn-label').css('color', $(this).prevAll(':not(.bar-appointment)').first().find('.fn-label').css('background-color'))
})

jsfiddle

edited Aug 11 '15 at 02:42

Pindo

1,585
5
16
32

answered Aug 11 '15 at 02:30

DGS

6,015
1
21
37

use .prev() to set current element css

1 Answers1