jQuery：如果孩子有类，则将类/css添加到父类

Posted 2023-05-07

【中文标题】jQuery：如果孩子有类，则将类/css添加到父类

【英文标题】：jQuery: if child has class, add class/css to parent

【发布时间】：2016-10-18 03:04:18

【问题描述】：

如果 (a) 的子 (img) 具有 .ls-thumb-active 类，我想在 (a) 中添加悬停功能...这是 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...

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

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

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

任何帮助将不胜感激！

谢谢你:)

【问题讨论】：

$(".ls-thumb-active").parent().addClass("shadow"); 非常适合我。 $('a:has(img.ls-thumb-active)').addClass('shadow');

也是如此

所以你真的想为所有a 元素添加悬停功能。并根据图像是否处于活动状态来切换课程？

是的，但仅当子元素具有类 .ls-thumb-active 时才切换！

【参考方案1】：

你已经接近了...... 你只需要选择不同的方式$('a .ls-thumb-active').addClass('shadow');

只要该 DOM 元素在页面加载时可用，这应该可以工作。

编辑（根据 OP 的原始请求）：

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

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

Codepen

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

【讨论】：

OP 想要将shadow 类添加到<a> 标记中。这将选择该类，然后将其添加到 <img> 标记中。

知道了！谢谢！给我 1 秒，我会在更多反对票到来之前解决它

你的第一个建议 - $('a .ls-thumb-active').addClass('shadow');适用于 js fiddle，但不适用于我的网站！

尝试使用jQuery 而不是$

使用 jQuery 代替不起作用...我想知道这是否是因为您所说的 DOM 元素在页面加载时可用，因为它似乎在其他任何地方都可以使用，对不起，我是这样一个js新手！你知道我怎么能解决这个问题吗？