Looking to add CSS class to child if a parent has specific value

Question

I have two event types on my page and I wanted to automatically add a CSS class to the <span> items in the parent class (div) of the event if their data-colr="value" .

For instance:

if data-colr="#123456" of the class .eventon_list_event exists, add color="#e1e1e1" to the <span> inside that parent class .eventon_list_event .

Any help would be greatly appreciated!

Answer 1

Use this:

$('.eventon_list_event').each(function(){
    if ($(this).attr('data-colr') == '#123456') {
        $('this').find('span').css('color', '#e1e1e1');
    }
});

Answer 2

HTML:

<div class="eventon_list_event" data-color="#123456">
  Div
  <span>Span</span>
  <span>Span</span>
  <span>Span</span>
  <span>Span</span>
  <span>Span</span>
</div>

CSS:

.span-color {
  color: #f06;
}

jQuery:

if($('.eventon_list_event').data('color') === '#123456') {
  $('.eventon_list_event').find('span').addClass('span-color');
}

Codepen

Answer 3

jQuery :

$(document).ready(){
    if ($(".eventon_list_event").data("colr")=="#123456")
    {
        $(".eventon_list_event span").css("color", "#e1e1e1");
    }
}

For multiple div s:

$(document).ready(){
    $('.eventon_list_event').each(function(){
        if ($(this).data("colr") == '#123456') {
            $(this).find('span').css('color', '#e1e1e1');
        }
    });
}

Each

- loops through all the instances of the DOM element

If you were to miss that, jquery would take data from the first div instead of all separately

Be sure to always write this instead of 'this'

This is the bad way to do it:

Bad Way

And this is the good way:

Good way