jquery将css应用于最近div的所有子元素答案

【问题标题】：jquery apply css to all child elements of closest divjquery将css应用于最近div的所有子元素
【发布时间】：2016-05-12 21:17:04
【问题描述】：

我希望不仅将 css 应用于最接近的“div”，还希望将 css 应用于 div 的所有子元素。

我现在的代码是这样的

$(document).ready(function(){
$(".classname").closest('div').css({"background-color": "purple"});
});

这只会在 div 上放置一个背景，其中包含八个白色选择框，我希望它们都具有相同的背景颜色。

使用常规 css 我会通过 .classname > *{background-color:red;}

html类似于

<div>
<select>
<option class="classname"></option>
</select>
<select>
<option class="other"></option>
</select>
<select>
<option class="other"></option>
</select>
<select>
<option class="other"></option>
</select>
</div>

【问题讨论】：

你能添加你的 HTML 结构吗？此外，您的 CSS 选择器和 jQuery 选择器正在做不同的事情。
尝试在移动设备上添加代码

标签： jquery css

【解决方案1】：

你可以使用 jquery .children

$(".classname").closest('div').css({"background-color": "purple"});
$(".classname").closest('div').children().css({"background-color": "purple"});

【讨论】：

谢谢，.children() 选项是我一直在寻找的与 .closest(div) 一起使用的选项。您是否知道是否有将其应用于任何具有包含某些字符的类名的元素，例如.... $(".*class* ").children().css({"background-color ": "紫色"});

【解决方案2】：

您的 CSS 示例将背景应用于 .classname 的所有直接子级。要使用 jQuery 实现相同的结果，您可以执行以下操作：

$(document).ready(function(){
    $(".classname").children().css({"background-color": "purple"});
});

jQuery 中的 'closest' 函数从元素本身开始查找与选择器匹配的所选元素的最近祖先。在您的代码中， .classname 似乎是一个 div，因此 .closest('div') 匹配元素本身（没有效果）并应用背景。

【讨论】：

谢谢，.children() 选项是我一直在寻找的与 .closest(div) 一起使用的选项。您是否知道是否有将其应用于任何具有包含某些字符的类名的元素，例如.... $(".*class* ").children().css({"background-color ": "紫色"});

【解决方案3】：

你可以使用下面的代码

    $(document).ready(function(){
    var purpleBackgroundCss  = {"background-color": "purple"};
    $(".classname").closest('div').css(purpleBackgroundCss).children('div').css(purpleBackgroundCss);
    });

【讨论】：

嗨，米娜，感谢您的回复，这可行，但是您似乎可以只使用一次定义 css，例如$(".classname").closest('div').children().css({"background-color": "purple"});