Question

Got a quick one, hopefully. I have these two list items included below. The font color for the royalHtmlContent is grey, but I need the font color to be white if it has royalImage within the royalSlide list item.

<li class="royalSlide" style="height: 420px; width: 610px; ">
<div class="royalHtmlContent">Text</div>
</li>

<li class="royalSlide" style="height: 420px; width: 610px; ">
<img class="royalImage" src="#" width="610" height="420" style="margin-left: 0px; margin-top: 0px; ">
<div class="royalHtmlContent royalHtmlContentOverlay">Text text text</div>
</li>

I tried this, but it’s not working… it’s just applying the class (which will have the style for white font color) to all the royalHtmlContent. I need it to do this only if it has royalImage within the list too.

if ($('.royalSlide').has('.royalImage')) {
    $('.royalHtmlContent').addClass('royalHtmlContentOverlay');
}

Thanks in advance,
R

Answer 1

Your code does not work for two reasons (prioritized)

• A jQuery selection alwyas returns a selection and never a falsy value so the condition is always met
• the selection used in the if is independant of the selection inside the if.

Start by selecting the image. If the selection is empty the rest of the chain will not do anything

$(".royalSlide > .royalImage").next("div.royalHtmlContent")
                              .addClass('royalHtmlContentOverlay');