jQuery:如果孩子有类，则将class/css添加到父类 [英] jQuery: if child has class, add class/css to parent

问题描述

如果它的子级(img)具有.ls-thumb-active类，我想将悬停函数添加到(a)中...这是html的示例

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>

这是一个wordpress插件，已经有一个悬停事件(不透明度0.7> 1)，但是当孩子(img)的类为.ls-thumb时，我还想将css样式添加到父对象(a)-active ...我已将这些样式应用于CSS中的.shadow ...

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;

我想出了几行jQuery，但是我不知道为什么它不起作用！到目前为止，这是我尝试过的...

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');

任何帮助将不胜感激！

谢谢:)

推荐答案

您将关闭...
您只需要选择其他
$('a .ls-thumb-active').addClass('shadow');

只要该DOM元素在页面加载时可用，该方法就应该起作用.

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

编辑(根据OP的原始请求):

EDIT (Per OP's Original Request):

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

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

Codepen

注意:在WordPress上，通常必须使用 jQuery 而不是 $ 才能使其正常工作.

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

这篇关于jQuery:如果孩子有类，则将class/css添加到父类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！