jQuery: if child has class, add class/css to parent

Question

I would like to add hover function to (a) if it's child (img) has class .ls-thumb-active ... Here is an example of the html

<a href="#" class="ls-thumb-1" style="width: 400px; height: 125px;">
    <img src="http://ldngrp.co/wp-content/uploads/2014/10/apprenticeships.jpg" class style="opacity: 0.7"></a>

<a href="#" class="ls-thumb-2" style="width: 400px; height: 125px;">
   <img src="http://ldngrp.co/wp-content/uploads/2014/10/apprenticeships.jpg" class="ls-thumb-active" style="opacity: 1"></a>

This is a wordpress plugin, and already has a hover event (opacity 0.7>1), however I would like to also add the css styles to the parent (a) when the child (img) has class .ls-thumb-active... I have applied these styles to .shadow in css...

box-shadow: 0 0 40px 1px rgba(17,17,17,0.2);
z-index: 2;

I have come up with a few lines of jQuery, but I have no idea why it is not working! Here is what I have tried so far...

$('a.ls-thumb-1:has(img.ls-thumb-active)').addClass('shadow');
$('.ls-thumb-active').parent().addClass('shadow');
$( "a:has(img.ls-thumb-active)" ).addClass( "shadow" );
$('a:has(.ls-thumb-active)').addClass('shadow');

Any help would be hugely appreciated!

Thank you :)

$(".ls-thumb-active").parent().addClass("shadow"); works perfectly for me. So does $('a:has(img.ls-thumb-active)').addClass('shadow'); — jszobody
So really you want to add hover function to all a elements. and toggle the class depending if it's image active or not? — wirey00
Yes, but only toggle when the child element has class .ls-thumb-active! — user3541921

cameck cameck · Accepted Answer · 2016-06-16T14:23:43

You're close...
You just need to select it differently
$('a .ls-thumb-active').addClass('shadow');

That should work as long as that DOM element is available on page load.

EDIT (Per OP's Original Request):

$.fn.addShadowToParent = function() {
    this.parent().addClass('shadow');
};

$('a .ls-thumb-active').addShadowToParent();

Codepen

NOTE: On WordPress you usually have to use jQuery instead of $ to get it working.

jQuery: if child has class, add class/css to parent

1 Answers